webpackerでTypeScriptの型チェックをする
READMEにも書いている通り、型チェックはoptionalになっています。それをこうやったよ、という記事です。
https://github.com/rails/webpacker/blob/master/README.md#typescript
ドキュメントには webpack/base.js
に書いてねってあるんだけど Rails.envにはbaseなんてないので、webpack/base.js
がRails.envとどう絡んでくるのかよくわからなかった。
そして、const { merge } = require("@rails/webpacker");
で取れるmergeはnot functionだったりでコピペでは動かなかった。
おそらくフロントエンドマンにはわかるハイコンテキストな状態なのだと思う。知らんけど。
掲題のことをやるためにこうやったよ
yarn add fork-ts-checker-webpack-plugin
でパッケージを入れて、 config/webpack/development.js
を以下の通りに書き換えればOK。
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
const { merge } = require('webpack-merge')
const ForkTSCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
module.exports = merge(environment.toWebpackConfig(), {
plugins: [new ForkTSCheckerWebpackPlugin()],
})
この状態にしてから、webpackを動かすと型チェックをしてくれて型が合わないとエラーになった。よかったですね。
あとがき
フロントエンドのしきたりみたいなものが全然わからないのでドキュメントに書いている揺らぎっぽいものがあるとそれで全くできなくなる!以前にwebpackを使ったことがあったので出力内容から起きていることを予想して対処できたけど、webpackerが初フロントエンドだったら絶対に対処できなかった。初見に優しくない。
-
category:
- 日記