最近のBebelがよくわかりません、という人向けに書いてみます。
7系
現時点で7系はBeta版となっています。公式Docは6系について書かれているので、7系を使ってみたい人には何の参考にもなりません。というか、インストールするパッケージ名がそもそも違います。 7系では以下のパッケージとプリセットから始めることになります。
- @babel/core
- @babel/preset-env
scoped packages
見慣れない命名規則に一部の人は面食らうと思いますが、見慣れないだけで標準仕様です。
プリフィックスの @
は名前空間のようなものです。その名前空間の /
下にパッケージ名やプラグイン名を付けるというような感じです。
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で書けます。いろいろ弄れるようになるので捗りますね。
詳細仕様は公式で確認を。公式は正義なり。