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-env
の useBuiltIns
オプションは便利
@babel/preset-env
のuseBuiltIns
オプションは、勝手に必要な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の仕組み」という記事が非常に参考になりました。