Babel7事始め

最近のBebelがよくわかりません、という人向けに書いてみます。

7系

現時点で7系はBeta版となっています。公式Docは6系について書かれているので、7系を使ってみたい人には何の参考にもなりません。というか、インストールするパッケージ名がそもそも違います。 7系では以下のパッケージとプリセットから始めることになります。

  • @babel/core
  • @babel/preset-env

scoped packages

見慣れない命名規則に一部の人は面食らうと思いますが、見慣れないだけで標準仕様です。 プリフィックスの @名前空間のようなものです。その名前空間/ 下にパッケージ名やプラグイン名を付けるというような感じです。

  • babel-cli -> @babel/cli
  • babel-core -> @babel/core
  • babel-preset-env -> @babel/preset-env

es20xx

かつて大正義だったプラグインのbabel-preset-es20xxは非推奨となりました。yarn add babel-preset-es2015 babel-preset-es2016 などという鬱陶しい作業は不要になったのです。代わりにbabel-preset-envを使いましょう。preset-envの使い方は多く出回っているので省略しますが、必要なときだけpolyfillを追加してくれるという超便利オプション 'useBuiltins': 'usage' は、以下のQiita記事が参考になります。

babel-preset-env 2.0のuseBuiltInsを使ってpolyfillする - Qiita

ECMAScript Proposal Stages

プラグインはbabel-preset-stage-xでまとめて導入するのが楽です。が、使いもしないプラグインを読み込むのは無駄だし、管理という面から見ても微妙です。これからは必要なプラグインのみをインストールするようにしましょう。なお、object-rest-spreadなど、よく使うであろうプラグインはpreset-envに含まれているので要注意です。

その他

提案段階にあるプラグイン命名規則が変更になって、他と差別化されて一目でわかるようになりました。また、es2015といった不要な年表記はなくなりました。スッキリですね。

  • babel-plugin-transform-class-properties -> @babel/plugin-proposal-class-properties
  • babel-plugin-transform-es2015-classes -> @babel/plugin-transform-classes

Webpackを使う場合は、babel-loaderも7系に対応したものを使います。

  • babel-loader@8.0.0-beta.0

地味に嬉しい点として、babelrcが .babelrc.js といった感じにjsで書けます。いろいろ弄れるようになるので捗りますね。

詳細仕様は公式で確認を。公式は正義なり。