LoginSignup
5
4

More than 3 years have passed since last update.

babel7で"@babel/preset-env"のオプション"useBuiltIns"を使う

Last updated at Posted at 2019-03-31

babel/polyfillがdeprecatedな件について追記(2019/06/16

どうやら、Babel v7.4.0以降では、core-js/stableが含まれているため、corejs: 3を使うならもう@babel/polyfillはお払い箱のようです。

ここら辺のPRに色々書いてあります。

yarn remove @babel/core @babel/polyfillしてからyarn add --dev @babel/coreしてbabelを7.4.5系にアップデートしたら、以下のwarningが消えました。めでたし

As of Babel 7.4.0, this package has been deprecated in favor of directly including core-js/stable (to polyfill ECMAScript features) and regenerator-runtime/runtime (needed to use transpiled generator functions): > import "core-js/stable"; > import "regenerator-runtime/runtime";

以下の内容は、babel v7.4.5以前を使用している場合に限る古い内容であることに注意してください。


Reactとtsxでよく開発しています。

babel7からはtypescriptのサポートが入って、しかし型チェックはしてくれないので別でやる必要があったりなどとまだ少し面倒くさいですが、それでもts-loaderさようならということでbabelを愛用しています。

@babel/preset-envuseBuiltIns オプションは便利

@babel/preset-envuseBuiltInsオプションは、勝手に必要なpolyfillを判断して自動で追加してくれる優れものなのですが、ドキュメントの読みが甘く、少し詰まりました。

こんな感じに、core-jsないじゃん!って怒られました。

ERROR in ./src/App.tsx
Module not found: Error: Can't resolve 'core-js/modules/es6.object.set-prototype-of' in '/mnt/e/Development/life/src'
 @ ./src/App.tsx 3:0-53
 @ ./src/index.tsx
 @ multi (webpack)-dev-server/client?http://localhost:3000 (webpack)/hot/dev-server.js ./src/index.tsx

むむむ。@babel/preset-envはnpm installしてるし、babel-loader内で['@babel/preset-env', { useBuiltIns: 'usage' }],これを指定しておけばほかはないもいらない想定だったんだけどなぁ。なぜ

@babel/polyfillも必要

@babel/polyfillは過去の遺物、もうuseBuiltInsがあるから、それだけでOKと勘違いしていたのですが、違いました。

実は、useBuiltInsオプションを使用すると、core-jsなどのimport polyfillを自動的に追加してくれるのですが、肝心のソース自体は@babel/polyfillから引っ張ってくるようでした。

きちんとドキュメントにも書いてありました。。

(via @babel/polyfill).

wtf

参考

「Babel7.x時代のpolyfillの設定方法とuseBuiltInsの仕組み」という記事が非常に参考になりました。

5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4