TypeScript コンパイル出力先変更

TypeScript コンパイラでコンパイルされた JS ファイルを別のディレクトリに出力する方法

日本語説明

TypeScript コンパイラである tsc を使用してコンパイルされた JavaScript ファイルを、ソースコードのディレクトリとは異なる場所に保存したい場合、--outDir オプションを使用します。

例

tsc --outDir dist src/index.ts

このコマンドを実行すると、src/index.ts ファイルをコンパイルし、コンパイルされた JavaScript ファイルを dist ディレクトリに保存します。

オプションの詳細

• src/index.ts: コンパイルする TypeScript ファイルのパスを指定します。
• --outDir: コンパイルされた JavaScript ファイルを保存する出力ディレクトリを指定します。

注意

• 複数の TypeScript ファイルをコンパイルする場合、すべてのファイルの相対パスを指定するか、プロジェクトルートディレクトリから実行して tsc にプロジェクトファイルの構成を認識させます。
• 出力ディレクトリが存在しない場合は、コマンドの実行時に自動的に作成されます。

プロジェクトルートからの実行

プロジェクトのルートディレクトリで tsconfig.json ファイルを作成し、コンパイラのオプションを設定します。

{
  "compilerOptions": {
    "outDir": "dist"
  }
}

その後、プロジェクトルートで tsc コマンドを実行すると、tsconfig.json ファイルの設定に従ってコンパイルされます。

例 1: コマンドラインでの使用

tsc --outDir dist src/index.ts

例 2: tsconfig.json ファイルの使用

// tsconfig.json
{
  "compilerOptions": {
    "outDir": "dist"
  }
}

tsc

• tsconfig.json ファイルに outDir オプションを設定し、プロジェクトルートで tsc コマンドを実行します。

例 3: JavaScript ファイルのインポート

// src/index.ts
import { greet } from './utils';

greet('World');

// src/utils.ts
export function greet(name: string) {
  console.log('Hello, ' + name);
}

• index.js から utils.js をインポートして使用できます。
• TypeScript ファイルをコンパイルすると、dist ディレクトリに index.js と utils.js が生成されます。

--outFile オプション

• すべてのコンパイルされた JavaScript ファイルを単一の出力ファイルに結合します。

tsc --outFile dist/bundle.js src/index.ts src/utils.ts

--rootDir オプション

• 相対パスを使用してファイルを参照する場合に便利です。
• コンパイルする TypeScript ファイルのルートディレクトリを指定します。

tsc --rootDir src --outDir dist

tsconfig.json ファイルの baseUrl プロパティ

• 複数のプロジェクトを組み合わせる場合や、複雑なモジュール構造を使用する場合に便利です。
• 相対パスを使用してモジュールを解決するためのベースURLを指定します。

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src",
    "outDir": "dist"
  }
}