Babel v7 Upgrade Guide

Babelを上げたのでまとめてみた

Sun, 28 Apr 2019

お久しぶりです。

みんな大好き babel のバージョンを上げる機会があったので備忘録的にまとめたいと思います。

TL;DR

  • Babel6 を使っていた SPA を Babel7 に上げました
  • Polyfill をどうするかのポリシー次第で設定の書き方が違いました

upgrade 6 to 7

公式を見ればすんなりいくのかなと思ったらそうでもなかったです。

具体的には babel-upgrade ツールを実行しても一部のマニアックな plugin(babel-plugin-rewire )などはうまく package.jsondependencies を書き換えてくれなかったです。

なので、上記ツールを実行した後、更新漏れになっていた plugin を手で上げていきまいした

$ npx babel-upgrade --write

僕の場合は何故か .babelrc も書き換えてくれなかったので下記のように中身を編集して変えました。

{
-  "plugins": ["transform-object-rest-spread"],
-  "presets": ["react", "es2015"]
+  "plugins": ["@babel/proposal-object-rest-spread"]
+  "presets": ["@babel/react", "@babel/env"]
}
  • package 名が @babel/preset-react のようになっていても preset の部分を省略できるみたいです。

ちなみに公式ドキュメント をよく読むと

- You want to programmatically create the configuration?
- You want to compile node_modules?

> babel.config.js is for you!

- You have a static configuration that only applies to your simple single package?

> .babelrc is for you!

- The Guy Fieri is your hero?

> We recommend to use the babel.config.js format. Babel itself is using it.

動的に設定ファイルを使ったりしたい場合は babel.config.js をシンプルに使いたいだけなら .babelrc を推奨しているそうです(Guy Fieri 氏のくだりが完全に意味わかんないですが)

ESLint

  • ESLint を使用している場合は注意が必要です
  • 今回は eslint も古かったので一緒に上げたのですが babel-eslint を追加しつつ設定ファイルを更新しないといけないです。

Polyfill

今回ちょっと考えさせられたのが polyfillでした

babel-polyfill@babel/polyfillに変更するのはもちろんなのですが、 @babel/preset-env パッケージの useBuiltIns オプションと併用するのが便利です。 (というか、useBuiltIns オプションを使わないなら個別の polyfill を追加することを公式も推奨しています。)

useBuiltIns オプションの使い方としては下記のようになります

目的 使い方
すべての Polyfill を入れたい useBuiltIns: entry && import "@babel/polyfill"
必要な Polyfill だけを入れたい useBuiltIns: usage
勝手に Polyfill を入れないでほしい useBuiltIns: false && 必要な個別の polyfill を都度 import

ホントは usage を使いたいところですが、experimentalということもあり今回は見送りました。(レガシーブラウザをサポートしているプロジェクトかつ元々すべての polyfill を入れていたのでそのままにしたというのもありますが)

最終的にどうだったか

最初は楽勝かなと思っていたのですが、意外と調べないと安心できない部分が多かったです。 (次こそは楽勝のはず!!)

ちなみにバージョンを上げたところ、トランスパイルにかかる時間が半分になったり、npm install 時間が早くなったりなど、いいことが多かったので余裕があればやったほうがいいと思いました。

この先これを読み返すであろう自分も含めて、役に立つといいな。

Loading...

Copyright 2018-19 satoshicano