Webpacker 5.1以降で.vueファイルをbuild時にTypeScriptの型チェックを実行する方法MEMO

Webpackerのversion5.1からts-loaderではなく、@babel/preset-typescriptを使うようになりました✨

github.com

これによりwebapckのbuild実行時の型チェックをfork-ts-checker-webpack-pluginを使うように変更になりました🤖

github.com

しかし、デフォルトだとbuild時の型チェックが実行されなくなり、さらに.vueファイルを対象に含めるにはひと手間必要だったので、そのへんをメモしておきます📝

The default installation only transpiles your TypeScript code using Babel. https://github.com/rails/webpacker/blob/master/docs/typescript.md#optional-adding-compile-time-type-checking

目次

Webpackerでbuild時に型チェックを実行する方法(.vueは含まない)

公式ドキュメントにもbuild時に型チェックを行う設定例が記載されています👀

// config/webpack/development.js
// ref:https://github.com/rails/webpacker/blob/master/docs/typescript.md#optional-adding-compile-time-type-checking
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const path = require("path");

environment.plugins.append(
  "ForkTsCheckerWebpackPlugin",
  new ForkTsCheckerWebpackPlugin({
    typescript: {
      tsconfig: path.resolve(__dirname, "../../tsconfig.json"),
    },
    async: false,
  })
);

しかし、この設定内容だとVue用の設定が不足していて.vueが型チェックの対象となりません😭

Webpackerでbuild時に.vueを含めて型チェックを実行する方法

fork-ts-checker-webpack-pluginを使ってbuild時に.vueの型チェックを有効にするにはtypescript.extensionsでvue: trueを指定する必要があります・・・！

TypeScript extensions options
vue: If true, it enables Vue Single File Component support. https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#typescript-extensions-options

下記のような設定で無事にbuild時に.vueファイルの型チェックが行われるようになりました🙌

const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const path = require("path");

environment.plugins.append(
  "ForkTsCheckerWebpackPlugin",
  new ForkTsCheckerWebpackPlugin({
    typescript: {
      // fork-ts-checker-webpack-pluginの公式ドキュメントではtsconfigのパスはconfigFileで指定するとのことだったのでそれに従った
      configFile: path.resolve(__dirname, "../../tsconfig.json"), 
      extensions: {
        vue: true, // .vueファイルの型チェックを有効化
      }
    },
    async: false,
  })
);

Webpacker難しい・・・！！