Babel7 がやってきた

2018年8月27日、Babel6 から2年の時を経て Babel7 がリリースされたということで、変更点をまとめてみました。

目次：

• npmパッケージを @babel@babel 名前空間に移行
• 年ごとのプリセット（preset-es2015preset-es2015 など）とステージごとのプリセット（preset-stage-0preset-stage-0 など）を削除
• 提案段階のプラグイン名を変更（transformtransform から proposalproposal へ）
• プラグインやプリセットの peerDependency に @babel/core@babel/core を追加
• babel-upgradebabel-upgrade ツール
• 設定ファイルをJavaScriptで記述可能に（babel.config.jsbabel.config.js）
• 処理速度の改善
• TypeScript をサポート（@babel/preset-typescript@babel/preset-typescript）
• JSXフラグメントをサポート（@babel/plugin-transform-react-jsx@babel/plugin-transform-react-jsx）

よくわからない部分はよくわからなかったので省略しました。全体を知りたい方は公式ページをご覧ください。

npmパッケージを @babel 名前空間に移行

babel-corebabel-core は @babel/core@babel/core というように、npmパッケージは全て @babel@babel 名前空間に移行するようです。

例えば babel-corebabel-core の npm ページを見ると Published 4 months ago とか書かれててバージョンも 6.26.3 が最新になっているので、移行前のパッケージのほうはもう今後更新されないのでしょう。

年ごとのプリセットとステージごとのプリセットを廃止

@babel/preset-es2015@babel/preset-es2015 などの年ごとのプリセットや @babel/preset-stage-0@babel/preset-stage-0 などのステージごとのプリセットを廃止し、今後は @babel/preset-env@babel/preset-env を使うように、とのことです。

ステージごとのプリセットはnpmページの依存関係を見れば分かる通りnpm install @babel/preset-stage-0npm install @babel/preset-stage-0 とやっても何もインストールされなくなりました。

年ごとの方はまだ生きているようですが、いずれ消える可能性が大きいんじゃないでしょうか。

提案段階のプラグイン名を変更

ステージ0から3までのまだ提案段階の仕様は、分かりやすさのために transformtransform ではなく proposalproposal という名前をつけることになりました。

今まで babel-plugin-transform-class-propertiesbabel-plugin-transform-class-properties だったのが @babel/plugin-proposal-class-properties@babel/plugin-proposal-class-properties というふうになるみたいです。

プラグインやプリセットなどの peerDependency に @babel/core を追加

Babel6 の @babel/core@babel/core と Babel7 用プラグインを同時に使うということを避けるようにするため、各プリセットやプラグインに Babel7 の@babel/core@babel/core を依存関係として追加するようです。今までは依存関係を持っていなかったので、バージョンの異なる（互換性のない） @babel/core@babel/core とプラグインを同時に使ってしまうということが起きていたみたいです。

この変更よって、今後は以下のように明示的に @babel/core@babel/core をインストールする必要があります。

$ npm install -D @babel/core @babel/cli @babel/preset-env

$ npm install -D @babel/core @babel/cli @babel/preset-env

babel-upgrade ツール

依存関係や設定ファイルを自動的に Bebel7 用に更新してくれるツールらしいです。詳細についてはGitHubページのreadme.mdをみた方が早いでしょう。

@babel@babel 名前空間への変更や @babel/preset-stage-x@babel/preset-stage-x の削除、transformtransform から proposalproposal への変更などを自動的にやってくれるみたいです。

設定ファイルをJavaScriptで記述可能に

今まで Babel の設定は .babelrc.babelrc で行なっていましたが、 Babel7 ではbabel.config.jsbabel.config.js でJavaScriptでの記述が可能になりました。

module.exports = {
  presets: [
    [
      "@babel/preset-env", {
        "targets": "last 2 versions"
      }
    ]
  ]
};

module.exports = {
  presets: [
    [
      "@babel/preset-env", {
        "targets": "last 2 versions"
      }
    ]
  ]
};

何が嬉しいかというと、JavaScript なので条件分岐が書けます。開発用と本番用で設定を変えたいけどファイルを分けるほどではない場合とかに重宝するでしょう。

さらに、overridesoverrides を使うことでフォルダごとの設定が可能になります。.babelrc.babelrc を使う場合はフォルダごとに .babelrc.babelrc を置かなくてはならなかったみたいですが、babel.config.jsbabel.config.js であればルートディレクトリに置いたファイルで全てのフォルダの設定が個別に行えます。

おわり

名前が結構変わったりしているので、ネットとかに転がってる package.json や .babelrc のちょっと古い設定をそのままコピペして使うと思わぬ沼にはまる可能性大です。怖いですね。

気をつけます。気をつけましょう。