🏖️

【TypeScript / Next.js】build用のtsconfig.jsonを用意してtestなどの不要なファイルを除く方法

2023/07/27に公開

Next.js

やりたいこと

前提として、TypeScript/Next.jsで構成されたアプリケーションの開発の話です

TypeScriptではtsconfig.jsonでコンパイラで読み込む対象と除外する対象のファイルのパスを指定することができます

そこで、開発時には全てのファイルをコンパイル対象にし、build時にはtestやstorybookなどbuildに必要のないファイルを除外してbuildを高速化・軽量化できるようにすることができないか、というのが今回の目的です

ちなみに、ChatGPTにbuild時に不要なファイルを除外することについて聞いてみるとこんな感じの回答が返ってきました

方針と調査

全てを含むtsconfig.jsonと、buildに不要なファイルをexcludeで除いたtsconfig.build.jsonを用意し、build時だけtsconfig.build.jsonを読み込むようにすることができれば今回の目的は達成できるのではないかと考えました

ただTypeScriptコンパイラを実行するだけであれば次のように--projectオプションで指定できます

Terminal

tsc --project tsconfig.build.json

また、webpackの場合も次の記事のようにすれば実現できます

しかし、Next.jsでtsconfig.jsonを切り替える方法について調べてみると意外と出てきませんでした・・・

一応、Next.jsの公式ドキュメントによるとnext.config.jsのoptionでtypescriptに関する設定ができそうに見えます
ただし、ignoreBuildErrorsの設定しか触れられていません

そこで、Next.jsのソースコードでtypescriptに関する設定ができないか探してみると、次の部分で指定のtsconfigPathを読み込んでくれることが分かりました

つまり、next.config.jsでtsconfigPathを指定してあげれば任意のtsconfig.jsonでbuildすることができそうです！

余談ですが、リポジトリのURLにアクセスして次のように github.comをgithub.devにするとブラウザでVSCodeが開けるので検索などが楽です

やってみる

まずnode_modules以外の全てをコンパイルするためのtsconfig.jsonを用意します
デフォルトでtsconfig.jsonが読み込まれるので、別途このファイルを参照するためのパスの指定はしていません

tsconfig.json

{
  "compilerOptions": {
    // 省略
  },
  "include": [
    // 省略
  ],
  "exclude": [
    "node_modules"
  ]
}

そして、tsconfig.jsonのexcludeにtestやstorybookを除外したものをtsconfig.build.jsonとします
この場合は*.test.tsxと*.storybook.tsxを除外するようにしていますが、ご自身が除外したいファイルに応じて変更してください
exclude以外は同じなのでtsconfig.jsonをextendsして利用します

tsconfig.build.json

{
  "extends": "./tsconfig.json",
  "exclude": [
    "node_modules",
    "**/*.test.tsx",
    "**/*.storybook.tsx"
  ]
}

あとはnext.config.jsでtsconfig.build.jsonを読み込むようにすれば完了です

next.config.js

module.exports = {
  typescript: {
    tsconfigPath: 'tsconfig.build.json',
  },
}

確認

next buildを実行すると次のような表示が出てtsconfig.build.jsonが参照されていることが確認できました！

Using tsconfig file: tsconfig.build.json

終わりに

公式ドキュメントにtsconfigPathに関する記述を追加するPRでも出してみようかな

やりたいこと

方針と調査

やってみる

確認

終わりに

Discussion