Zenn
🦁

tsconfig.build.json の設定解説 📝

に公開
TypeScript
初心者
継承
tsconfigbuildjson
ビルド設定
tech

提供された tsconfig.build.json の設定は非常にシンプルですが、その背後にあるTypeScriptの設定継承の強力なメカニズムを示しています。

tsconfig.build.json の各プロパティ解説 💡

プロパティ 設定値 解説
extends "./tsconfig" この設定が、指定されたパス（ここでは相対パスで ./tsconfig.json）にある別の tsconfig.json ファイルの設定を継承することを示します。これにより、共通の設定を一つのファイルにまとめ、他の設定ファイルではその共通設定を再利用しつつ、必要に応じて上書きまたは追加できます。今回のケースでは、tsconfig.build.json は ./tsconfig.json のすべての設定（先ほど解説した厳密な型チェックやESNextのターゲットなど）をまず読み込みます。
exclude ["example", "lib"] TypeScriptコンパイラが型チェックやコンパイルの対象から除外するファイルやディレクトリのリストを指定します。この設定は、include オプションやデフォルトでコンパイル対象となるファイルよりも優先されます。ここでは、example ディレクトリと lib ディレクトリがコンパイル対象から外されます。一般的な使用例としては、開発用サンプルコード (example) や、既にビルド済みで配布されるライブラリの出力ディレクトリ (lib や dist) を除外することが多いです。これにより、ビルド時間を短縮し、不必要なファイルのコンパイルを防ぎます。

この設定の意図と一般的なユースケース 🎯

この tsconfig.build.json は、以下のような目的で設計されていると考えられます。

  1. ビルド時のみに適用される設定:

    • extends を使用することで、./tsconfig.json で定義されている開発時の厳密な型チェックや最新のESNext機能の利用といった共通の基本設定をそのまま引き継いでいます。
    • そして、exclude オプションで example や lib ディレクトリを除外することで、製品として配布するコードのビルド時には、開発中にのみ必要なサンプルコードや、ビルドプロセスで生成される中間ファイル・最終出力ファイルを誤ってコンパイルしないようにしています。

  2. クリーンなビルドプロセスの実現:

    • 例えば、lib ディレクトリが以前のビルド成果物を含んでいる場合、それを exclude することで、古いコードが混入したり、コンパイルエラーの原因になったりするのを防ぎます。
    • 開発時にテストやデモのために作成した example コードを、製品ビルドには含めたくない場合にもこの設定が役立ちます。

  3. 複数設定の使い分け:

    • 開発用 (tsconfig.json): VS Codeなどのエディタがリアルタイムで型チェックを行う際に使用され、すべてのファイル（サンプルコードも含む）を監視対象とする場合があります。
    • ビルド用 (tsconfig.build.json): CI/CDパイプラインやnpmスクリプトなどで実際に製品版のJavaScriptを生成する際に使用され、必要なコードのみを効率的にコンパイルします。
    • テスト用 (tsconfig.test.json など): テストフレームワークが使用する特定の型定義やグローバル変数を追加するなど、テスト実行時のみに有効な設定を持つこともあります。

サンプルコードと使用した場合・使用しなかった場合の比較 📊

📌 サンプルコード (tsconfig.build.json を使用した場合のビルドコマンドのイメージ)

プロジェクト構造:

my-project/
├── tsconfig.json        <-- 共通の基本設定
├── tsconfig.build.json  <-- ビルド用の設定
├── src/
│   ├── main.ts
│   └── utils.ts
├── example/
│   └── demo.ts          <-- ビルドから除外したい
└── lib/
    └── index.js         <-- 以前のビルド成果物など、ビルドから除外したい

tsconfig.json (仮):

{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true,
    "module": "ESNext",
    "target": "ESNext",
    "jsx": "react-jsx",
    "moduleResolution": "bundler"
  }
}

tsconfig.build.json: (冒頭に記載のもの)

{
  "extends": "./tsconfig",
  "exclude": ["example", "lib"]
}

ビルドコマンドの実行:
tsc --project tsconfig.build.json

このコマンドを実行すると、TypeScriptコンパイラは tsconfig.build.json の設定を読み込みます。まず tsconfig.json の設定を継承し、その上で exclude で指定された example と lib ディレクトリ内のファイルをコンパイル対象から除外します。結果として、src/main.ts と src/utils.ts のみがコンパイルされ、dist ディレクトリに出力されます。

📌 exclude を使用しない場合の比較 (tsconfig.json のみでビルドした場合)

もし tsconfig.build.json の exclude 設定がなく、代わりに tsconfig.json に直接 example や lib が含まれていたり、include オプションで明示的に除外されていなかったりした場合、コンパイラはこれらのディレクトリ内のファイルも処理しようとします。

tsconfig.json (excludeなし、または不十分な場合):

{
  "compilerOptions": {
    "rootDir": ".", // もしこの設定だと、exampleやlibも対象になる可能性
    "outDir": "./dist",
    // ... その他の設定
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "example/**/*.ts"] // 例: exampleを含めてしまう
}

ビルドコマンドの実行:
tsc (または tsc --project tsconfig.json)

この場合、以下のような問題が発生する可能性があります。

  • コンパイルエラー: example ディレクトリ内のコードが未完成だったり、テスト用の特殊な構文を含んでいたりする場合、それが製品ビルドのコンパイルエラーを引き起こす可能性があります。
  • 不要なファイルの出力: lib ディレクトリに既にビルド済みのJavaScriptファイルがあるにも関わらず、TypeScriptコンパイラがそれを再度処理しようとし、重複した出力やエラーにつながる可能性があります。
  • ビルド時間の増加: 不要なファイルをチェック・コンパイルすることで、全体のビルド時間が長くなります。
  • バンドルサイズの肥大化: もしバンドラーが tsconfig.json の設定をそのまま利用してビルドする場合、不要な example コードが最終的なバンドルに含まれてしまう可能性があります。

Discussion