Babel 7へのマイグレーション方法まとめ

Babel 7がリリースされましたね。

記事「最新版で学ぶwebpack 4入門 - Babel 7でES2018環境の構築」では、webpack 4とBabel 7の連携について、最新版の情報にすべて書き直しました。サンプルもすべてBabel 7対応しています。

マイグレーションするなかで気づいた点を紹介しようと思います。

Babel 7の主な新機能

• TypeScriptをサポート
• babel.config.jsが新設. envで制御可能に。
  • .babelrc や package.json を置き換えるものではない
• globでプリセット指定が可能なoverrideが追加
• polyfillを必要分だけ自動的に導入(実験機能)

導入して気づいた、Babel 6→7の破壊的変更まとめ

• babel-coreから@babel/coreに名前が変更
• プリセットの設定名も変更
  • babel-preset-envが@babel/preset-envに変更された
  • babel-preset-reactが@babel/preset-reactに変更された
• @babel/preset-envで、モジュールがデフォルトでES Modules対応する
  • いままではimport文が忌まわしきrequire()メソッドに変換されるのを防ぐため、明示的に{module: true}を設定していたが、明示的に指定しなくてOK
• ポリフィルの扱いも変更
  • なんか自動的にプリフィルを当ててくれるらしい（要検証）

古い記事の手順だと最新版を導入できないので注意。

公式からアップグレードツールが便利

とりあえず、グローバルに入れる。

sudo npm i -g babel-upgrade

Babel 6のプロジェクトでドンと入力。

babel-upgrade --write --install

これで、package.jsonや.babelrcのほとんどはアップグレードできる。

ただし、webpack.config.jsonまでは管理してくれないので、自前で修正する必要あり。

Babelのテーマ曲

babel/SONG.md at master · babel/babel
に歌詞が公開されている。YouTubeでは歌声付きで視聴できる。