ディレクトリごとに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"]
    }]
  ]
}

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

まとめ

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