ES6からのトランスパイルするときのBabel 7 対応

タイトル通り、Babelの話。 JavaScript書いていると、避けて通れないのがES6からのトランスパイル。 このとき使うデファクト・スタンダードになったBabelで最近つまづいたのでメモです。

ことの発端

MochaでES6のコードを実行させるために babel-core, babel-register, babel-preset-env 入れたけど、deprecatedとか言われたのが事のはじまり。 ターミナルで言われてるバージョンをただ入れるだけでは済まないとは知らず。。。

Babel 7 ??

要はバージョンのメジャーアップデートで単にモジュールが変わっただけじゃない。そもそもの名称から変わっていたのです。 今までの要領でNPM覗いても、バージョン6系しか載ってないので注意しないといけないですね。ちなみに、新しいバージョンは7系(beta版)です。

また、v7系にする場合は、使用するbabelのモジュールのバージョンはすべてv7系にしないと動きません。

[babel-core 今まで] www.npmjs.com

[babel-core v7以降] www.npmjs.com

基本的には、以下のように名称が改定されている模様です。(2018/01/09時点)

• 〜v6 : babel-xxyyzz
• v7〜 : @babel/xxyyzz

名前がわからない場合は以下の、packageから見たいbabelのモジュールを探せばOK。

github.com

Githubのissuesを辿る限りまだまだ議論されているようですが、そろそろ新しいものになると考えた方が良さそうです。JS界隈は流れ早いので、ついていくに越したことないですしね。

設定例

名前が変わったとはいえ、基本的には設定方法は以下2つで変わらないですね。

• コマンドラインからオプションでbabelのモジュールを指定する。
• .babelrcにモジュール名を入れる

以下、設定例です。 ほぼ公式の例から分かりやすいところを取り出しました。

{
  "presets": [
    ["@babel/preset-env", {
    "targets": {
      "browsers": ["last 2 versions"]
      }
    }]
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}

あとは、package.json で以下のようにbabel-cliを叩くようにすればOK。 babel ./src/ --out-dir dist/ --ignore ./node_modules --copy-files

やることは変わらないとはいえ、やっぱり名前から変わっちゃうのは気づかないとハマって抜けない罠ですわ。。。