タイトル通り、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の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
やることは変わらないとはいえ、やっぱり名前から変わっちゃうのは気づかないとハマって抜けない罠ですわ。。。