Babel 7 へのアップグレードにあたっての修正点

これはなに？

とあるリポジトリを Babel 6 から Babel 7 にアップグレードするにあたって、公式のアップグレードガイドを読んで修正が必要だった箇所をまとめたものです。網羅的に記載している物ではないので、細部は公式のアップグレードガイドを参照してください。

公式のアップグレードガイド

• Upgrade to Babel 7

あわせて Babel 7 Released も読むと、今回のリリースの背景等も知ることができて面白いでしょう。

.babelrc の有効範囲の変更

.babelrc に設定した内容は package.json ファイルを含むディレクトリ配下には適用されなくなっています。 node_modules 配下も同様の制限を受けます。これは monorepo のように複数のパッケージを管理する際の拡張性に配慮した変更のようです。

一方で babel.config.js を利用する場合にはこの制限を受けません。 monorepo のような特殊な要件が必要なければ babel.config.js への移行を検討して良いでしょう。

Config Files · Babel

パッケージのリネーム

公式で提供される各パッケージは scoped packages として提供されるようになりました。今後は公式で提供されるパッケージと、コミュニティーによってメンテナンスされているパッケージとがより区別しやすくなります。

- babel-preset-env
+ @babel/preset-env

変更点が多い場合は babel-upgrade というアップグレードをサポートするツールが提供されているので、こちらを使ってみても良いでしょう。

プロポーザルな仕様をサポートするプラグインのリネーム

プロポーザルな仕様をサポートするプラグインの名前に -proposal- が追加されるようになりました。

- @babel/plugin-transform-class-properties
+ @babel/plugin-proposal-class-properties

各種プリセットは非推奨となった

• babel-preset-es2015
• babel-preset-es2016
• ...
• babel-preset-stage-0
• babel-preset-stage-1
• ...

などのプリセットは非推奨となりました。代わりに @babel/preset-env に移行して、 プロポーザルな仕様をサポートしたい場合は個別にプラグインを利用する必要があります。

babel-polyfill はプロポーザルな機能をデフォルトで提供しなくなった

プロポーザルな仕様を polyfill したい場合は個別に import する必要があります。

import "core-js/fn/array/flatMap";

Flow をサポートする独立したプラグインの提供

これまでは babel-preset-react に Flow のサポートが含まれる形で提供されていましたが、Babel 7 からは独立したプラグインとして提供されるようになりました。なおこの変更は Babel 7 が TypeScript をサポートにするにあたり、複雑さを回避するための措置のようです。

- "presets": ["@babel/preset-react"]
+ "presets": ["@babel/preset-react", "@babel/preset-flow"]

babel-node コマンドの提供元パッケージの変更

babel-node コマンドは babel-cli パッケージの一部として提供されていましたが、Babel 7 からは分離され @babel/node パッケージとして提供されるようになりました。もし利用している場合は追加でインストールする必要があります。

なお babel-node というコマンド自体の名称は変更されていません。

babel-core/register は非推奨となった

babel-core/register は非推奨となりました。代わりに @babel/register が提供されているのでこちらに移行する必要があります。 mocha から利用している場合は以下のような修正が必要です。

- mocha --compilers js:babel-core/register
+ mocha --compilers js:@babel/register

その他パッケージのアップグレード

コミュニティーによって提供されるパッケージもアップグレードが必要なケースがあります。関連パッケージのリリースノートや CHANGELOG をひととおり確認した方が良いでしょう。

例:

• babel-loader
• babel-eslint
• babel-preset-power-assert