これはなに？
とあるリポジトリを Babel 6 から Babel 7 にアップグレードするにあたって、公式のアップグレードガイドを読んで修正が必要だった箇所をまとめたものです。網羅的に記載している物ではないので、細部は公式のアップグレードガイドを参照してください。
公式のアップグレードガイド
あわせて Babel 7 Released も読むと、今回のリリースの背景等も知ることができて面白いでしょう。
.babelrc の有効範囲の変更
.babelrc に設定した内容は package.json ファイルを含むディレクトリ配下には適用されなくなっています。 node_modules 配下も同様の制限を受けます。これは monorepo のように複数のパッケージを管理する際の拡張性に配慮した変更のようです。
一方で babel.config.js を利用する場合にはこの制限を受けません。 monorepo のような特殊な要件が必要なければ babel.config.js への移行を検討して良いでしょう。
パッケージのリネーム
公式で提供される各パッケージは 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 をひととおり確認した方が良いでしょう。
例: