TypeScriptコンパイル: 不要なファイルを賢く除外!tsconfig.jsonのexcludeプロパティ徹底解説
TypeScriptにおけるtsconfig.jsonでのパターンによる除外:詳細ガイド
TypeScriptコンパイラ(tsc)は、デフォルトでプロジェクト内のすべての .ts
ファイルをコンパイルします。しかし、テストファイル、ライブラリファイル、生成されたコードなど、コンパイルする必要のないファイルも存在します。このようなファイルをコンパイル対象から除外するために、tsconfig.json
ファイルの exclude
プロパティが役立ちます。
本ガイドでは、tsconfig.json
におけるパターンによるファイル除外について、詳細な解説と実践的な例を交えて説明します。
exclude
プロパティは、tsconfig.json
ファイル内に記述される配列であり、コンパイル対象から除外するファイルやディレクトリのパスをパターンで指定します。パターンは、単純なワイルドカードから、より高度な glob パターンまで様々な形式を使用できます。
パターン形式
exclude
プロパティで使用できるパターン形式は次のとおりです。
glob パターン
**
: ディレクトリツリー全体に一致{pattern1,pattern2}
: 複数のパターンを論理 OR で結合!(pattern)
: パターンを除外
単純なワイルドカード
*
: 任意の数の文字列に一致?
: 1文字に一致[...]:
指定された文字のいずれかに一致
除外パターンの適用順序
exclude
プロパティで指定されたパターンは、上から下に処理されます。つまり、上位のパターンが下位のパターンよりも優先されます。この特性を利用して、より複雑な除外ルールを定義できます。
実践的な例
以下に、exclude
プロパティを使用した除外パターンの具体的な例を示します。
例 1:テストファイルを除外する
{
"exclude": [
"test/**/*.ts"
]
}
この例では、test
ディレクトリツリー内のすべての .ts
ファイルがコンパイル対象から除外されます。
例 2:ライブラリファイルを除外する
{
"exclude": [
"node_modules/**/*.ts",
"bower_components/**/*.ts"
]
}
この例では、node_modules
と bower_components
ディレクトリツリー内のすべての .ts
ファイルがコンパイル対象から除外されます。
例 3:生成されたコードを除外する
{
"exclude": [
"dist/**/*.ts"
]
}
この例では、dist
ディレクトリツリー内のすべての .ts
ファイルがコンパイル対象から除外されます。これは、通常、ビルドプロセスによって生成されるコードを格納するディレクトリです。
include プロパティとの併用
exclude
プロパティは、include
プロパティと併用して使用できます。include
プロパティは、コンパイル対象とするファイルやディレクトリのパスをパターンで指定します。
例 4:特定のディレクトリのみをコンパイルする
{
"include": [
"src/**/*.ts"
],
"exclude": [
"test/**/*.ts",
"node_modules/**/*.ts"
]
}
この例では、src
ディレクトリツリー内のすべての .ts
ファイルのみがコンパイル対象となり、test
と node_modules
ディレクトリ内のファイルは除外されます。
注意点
- 除外するファイルが他のファイルによって参照されている場合、コンパイルエラーが発生する可能性があります。
- ワイルドカードと glob パターンを混在させることはできません。
exclude
プロパティで指定するパターンは、tsconfig.json
ファイルが存在するディレクトリを基準とした相対パスです。
この例では、以下のディレクトリ構造を持つプロジェクトを想定します。
project
├── src
│ ├── app
│ │ ├── app.component.ts
│ │ ├── app.module.ts
│ │ └── app.routing.module.ts
│ ├── index.ts
│ └── test
│ └── test.spec.ts
├── node_modules
│ └── @types
├── package.json
└── tsconfig.json
tsconfig.json
以下の tsconfig.json
ファイルを作成します。この設定では、test
ディレクトリと node_modules
ディレクトリツリー内のすべてのファイルをコンパイル対象から除外します。
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"outDir": "dist"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"test/**/*.ts",
"node_modules/**/*.ts"
]
}
実行
以下のコマンドを実行して、TypeScriptファイルをコンパイルします。
tsc
コンパイルが成功すると、dist
ディレクトリにコンパイルされたJavaScriptファイルが生成されます。このディレクトリには、test
ディレクトリと node_modules
ディレクトリ内のファイルは含まれません。
- 特定の拡張子を持つファイルをすべて除外する:
"exclude": [
"*.spec.ts",
"*.d.ts"
]
- 特定のファイルのみを除外する:
"exclude": [
"src/app/app.component.css"
]
注意事項
include
プロパティと併用する場合は、include
で指定したファイルがexclude
で除外されないように注意する必要があります。
TypeScriptにおけるtsconfig.json以外でのファイル除外方法
グロブパターンを使用したCLIオプション
tsc
コマンドラインツールには、--exclude
オプションと --excludeDir
オプションが用意されています。これらのオプションを使用して、コンパイル対象から除外するファイルやディレクトリを直接指定できます。
tsc --exclude "test/**/*.ts" --excludeDir "node_modules" src/**/*.ts
このコマンドは、tsconfig.json
ファイルを使用せずに、上記例のプロジェクトと同じファイルをコンパイルします。
ロールアップなどのバンドルツール
Rollupなどのバンドルツールを使用している場合は、そのツール自身がファイルの除外機能を提供している場合があります。これらの機能を使用して、tsconfig.json
ファイルとは別にファイルを除外することができます。
カスタムビルドスクリプト
npm
や yarn
などのタスクランナーを使用して、カスタムビルドスクリプトを作成することもできます。このスクリプトを使用して、コンパイル対象から除外するファイルを独自に処理することができます。
上記の方法を使用する場合は、以下の点に注意する必要があります。
tsconfig.json
ファイルを使用する場合と比べて、設定の一貫性やメンテナンス性が損なわれる可能性があります。- 使用するツールやスクリプトによって、ファイル除外の構文やオプションが異なる場合があります。
tsconfig.json
ファイルは、TypeScriptプロジェクトからファイルをコンパイル対象から除外する最も一般的で推奨される方法です。しかし、上記で紹介した代替手段も、状況によっては有用な場合があります。
typescript tsconfig