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

2024-04-09

TypeScriptコンパイラでコンパイルされたJavaScriptを別のディレクトリに出力するには？

--outDir オプションを使う

TypeScriptコンパイラ（tsc）は、--outDir オプションを使って、コンパイルされたJavaScriptファイルの出力先ディレクトリを指定することができます。

tsc --outDir <出力先ディレクトリ> <ソースファイル>

例えば、src ディレクトリにある main.ts ファイルをコンパイルして、dist ディレクトリに main.js ファイルを出力したい場合は、次のコマンドを実行します。

tsc --outDir dist src/main.ts

このコマンドを実行すると、dist ディレクトリに main.js ファイルが生成されます。

rootDir オプションを使うと、ソースファイルの相対パスを維持したまま、別のディレクトリに出力することができます。

tsc --rootDir <ソースルートディレクトリ> --outDir <出力先ディレクトリ> <ソースファイル>

tsc --rootDir src --outDir dist src/**/*.ts

tsconfig.json ファイルを使う

上記のオプションをコマンドラインで毎回指定する代わりに、tsconfig.json ファイルを使って設定することもできます。

tsconfig.json ファイルには、コンパイラオプションを記述することができます。

{
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src"
  }
}

tsconfig.json ファイルを指定してコンパイルするには、次のコマンドを実行します。

tsc

上記の方法を使って、TypeScriptコンパイラでコンパイルされたJavaScriptファイルを別のディレクトリに出力することができます。

プロジェクト構成や目的に合わせて、適切な方法を選択してください。

補足

TypeScriptコンパイラは、デフォルトで現在のディレクトリに *.js ファイルを出力します。

関連キーワード

javascript
typescript
tsc
コンパイル
出力
ディレクトリ
オプション
tsconfig.json

// src/main.ts
console.log("Hello, world!");

// コマンド
tsc --outDir dist src/main.ts

// dist/main.js
console.log("Hello, world!");

rootDir オプションを使う

// src/app/main.ts
console.log("Hello, world!");

// src/utils/util.ts
export function sayHello() {
  console.log("Hello!");
}

// コマンド
tsc --rootDir src --outDir dist src/**/*.ts

// dist/app/main.js
console.log("Hello, world!");

// dist/utils/util.js
export function sayHello() {
  console.log("Hello!");
}

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

// src/main.ts
console.log("Hello, world!");

// コマンド
tsc

// dist/main.js
console.log("Hello, world!");

上記は、--outDir オプション、rootDir オプション、tsconfig.json ファイルを使って、コンパイルされたJavaScriptファイルを別のディレクトリに出力するサンプルコードです。

手動でコピーする

コンパイルが完了した後、生成された *.js ファイルを手動で別のディレクトリにコピーすることができます。

// コマンド
tsc src/main.ts

// 手動でコピー
cp dist/main.js /path/to/output/directory

この方法は、簡単な方法ですが、ファイル数が多い場合は手間がかかります。

Gulp や Webpack などのタスクランナーを使って、コンパイル後のファイル処理を自動化することができます。

// gulpfile.js
const gulp = require('gulp');

gulp.task('compile', () => {
  return gulp.src('src/**/*.ts')
    .pipe(tsc())
    .pipe(gulp.dest('dist'));
});

// コマンド
gulp compile

この方法は、ファイル数が多い場合や、複雑な処理を行う場合に便利です。

ソースマップを使うと、コンパイルされたJavaScriptファイルと元の TypeScript ファイルの対応関係を維持することができます。

// コマンド
tsc --outDir dist --sourceMap src/main.ts

// dist/main.js
//# sourceMappingURL=main.js.map

// dist/main.js.map
{
  "version": 3,
  "file": "main.js",
  "sources": [
    "src/main.ts"
  ],
  "names": [],
  "mappings": "..."
}

ソースマップを使うと、ブラウザのデバッガーで元の TypeScript ファイルをステップ実行することができます。

javascript typescript tsc