Vがいる日々

Nuxt TypeScript においてビルド用に別の tsconfig.json を指定したい

local_offer nuxt.js
local_offer tsconfig
create
2021年05月07日
update
2021年05月07日

はじめに🐏

Nuxt を TypeScript で利用しているとき、ビルド時に git worktree や git submodule 配下のファイルまでチェックしてエラーを出してくるので困った。

対処方法としては tsconfig.json の include や exclude で対象/除外のファイルを制御すればいい。
ただ VS Code のインテリセンスは有効化のままにしたかったので、Nuxt のビルド時だけ使う別の tsconfig.json を読み込むようにしたい。

Table 1. 環境
App Version

Nuxt

2.15.4

TypeScript

4.2.3

@nuxt/typescript-build

2.1.0

Nuxt ビルド時に参照する tsconfig.json を指定する方法💾

方法自体は簡単で、

  1. ビルド用の TSConfig を作成

  2. 作成した TSConfig ファイルパスを nuxt.config.json で指定

の2点だけすればいい。

ビルド用の TSConfig

extends を利用して現行の tsconfig.json の設定を引き継ぐとよさそう。

include や exclude 設定を上書きしてコンパイル対象とするファイルを制限する。

Example 1. ビルド用に調整した TSConfig の例
tsconfig.nuxt.json
{
  "extends": "./tsconfig.json",   (1)
  "include": ["src/**/*", "src/**/*.vue"],  (2)
  "exclude": ["node_modules", "**/*.spec.ts"]  (3)
}
1 通常の tsconfig.json ファイルを読み込み、設定を継承する。
パス指定するさいにファイル名だけではエラーになるので注意。
2 コンパイル対象をソースがある src/ ディレクトリ以下に限定。
3 除外するファイル指定を上書き。ここでは単体テスト用のファイルを追加して指定。

ビルド時の tsconfig.json を指定

結論から言えば @nuxt/typescript-build のモジュールオプションで指定できる。
下記のように nuxt.config.js ファイルにオプション設定を追加する。

Example 2. ビルド時に読み込む tsconfig.json を指定
nuxt.config.js でモジュールオプションを追加
export default {
  typescript: {   (1)
    typeCheck: {  (2)
      typescript: {
        configFile: resolve(__dirname, 'tsconfig.nuxt.json'),   (3)
        extensions: { vue: true },    (4)
      },
    },
  },
}
1 @nuxt/typescript-build のモジュールオプション設定。
2 型チェックに利用する fork-ts-checker-webpack-plugin のオプションを記述。
3 ビルド用に調整した TSConfig ファイルのパスを指定。
4 Vue の単一ファイルコンポーネントへの対応を有効化。
@nuxt/typescript-build のソースを見るとモジュールオプションを浅いコピーしているので、ここで明示的に指定しておく。

以上で Nuxt のビルド時には専用の TSConfig が適用される。

参考📖

Nuxt
TSConfig