es6
ServiceWorker
babel
Node.jsDay 21

ディレクトリごとにBabelの設定を変える

Babelを運用するに当たって、一部のディレクトリだけ設定を変更することができます。


必要になった動機

作っているシステムの中でService Workerを導入しようとしたのですが、Service Worker内ではfetchだけでなくcacheも非同期実行となっていて、Promiseだけで書くのも辛くなって、async-awaitを使いたくなってきました。

本体プログラムはIE11も切り捨てずに作っていたため、@babel/polyfillの巨大さが気になってasync-awaitを取り入れられずにいたのですが、Service Workerは機能自体がIE11に非対応ですし、本質的に「動かなければそれでいい」と割り切れるものなので、「async-awaitをそのまま出力してしまおう」という考えに至りました。


複数の.babelrc

ドットファイル系の設定ファイルではよくある話ですが、.babelrcでもディレクトリごとにファイルを置いて、設定変更が可能です。Babelのサイトにはnode_modulesを挟んだ場合の制約などが書いてありますが、1つのプロジェクト内で設定する分には問題となりません。


設定を行う

必要な設定は、



  • async-awaitの変換を止める

  • (ついでに)Service Workerとasync-awaitに対応できるブラウザ向けのコードを吐かせる

の2つです。@babel/preset-envで一部のプラグインをexcludeできるとのことだったので、以下のような設定となりました。


.babelrc

{

"presets": [
["@babel/preset-env", {
"modules": false,
// ServiceWorkerとasync-awaitが効く最低限
"targets": {
"chrome": "55",
"firefox": "52",
"ios": "11.4",
"edge": "17"
},
"exclude": ["transform-regenerator"]
}]
]
}

という感じとなりました。なお、途中にコメントが入っていますが、.babelrcJSON5を取り入れているため、途中にコメントが入っても構いません


まとめ

ターゲットが限られる場面では、積極的にターゲットを指定すれば、新しいJavaScriptでコンパクトなコードを生成することができます。