working-time-aroundではバンドラーにParcelを採用しました。試してみたかった、設定作業はしないに越したことがない、というのがその理由。実際に試してみるとなんにも準備せずに実行できる手軽さは圧倒的ですね。手放しでほめたくなります……が、ちゃんと開発するにあたってはおおきな落とし穴が。
Jest使いはじめて気がついたのですが、Jest はbabelと協調して動くので、Parcel では不要な babel の設定も Jest 用に用意しないといけないのでした……だったらwebpackで設定統一したほうがまちがいがおきなくてよいではありませんか!
Parcel と Jest + babel の分離は他にも問題があって、TypeScript のconst enum、Parcel では問題ないのに babel はトランスパイルを許さないのでビルドや実行は問題ないのにユニットテストは失敗するというヤな状態におちいります。こんなことに費やす時間は無駄なのではじめからプロダクションレベルのコードの必要性が明白なときは webpack を選択したほうがよいでしょう。もうすぐリリースされるという Parcel 2 が課題を解決しているとはかぎりませんし。
なお Jest を使うだけの babel の設定はこんな感じ。
"presets": [
"@babel/preset-typescript",
"@babel/preset-react",
[
"@babel/preset-env",
{
"targets": {
"node": "current"
},
"corejs": 3,
"useBuiltIns": "usage"
}
]
]
あ、あとMDC Reactが提供する.scss の依存関係(@import)がうまく解決されませんでしたが、これは Parcel ではなく MDC React 側の問題かもしれません。
2022-06-05(Sun)追記: 続きの記事、 Parcel 2 と Jest を組みあわせるときは Babel の設定を分離する を公開しました。