Target specific browsers with babel-preset-env and the babel pollyfill
Converting all of our modern JavaScript into ES5 compatible syntax is a great way to use modern features while targeting older browsers. What happens when the browsers natively support these language features? Then it no longer makes sense to transform that code or to include polyfills that will go unused. In this lesson, we’ll add the @babel/polyfill package and configure babel-preset-env
the video shows npm i -S @babel/polyfill but the transcript shows npm i -S @level/polyfill This cought me out for a minute, just use the @babel/polyfill and it all works fine.
The setting should be 'not IE 11' (space between IE and 11).
These series of lectures contain amazing tips!
Thank you Andy!!
I am having trouble building:
ERROR in ./src/index.js Module not found: Error: Can't resolve 'core-js/modules/es7.string.trim-left' in '/Users/alex/work/personal/react-biolerplate/src' @ ./src/index.js 2:0-46
I am having trouble building:
ERROR in ./src/index.js Module not found: Error: Can't resolve 'core-js/modules/es7.string.trim-left' in '/Users/alex/work/personal/react-biolerplate/src' @ ./src/index.js 2:0-46
npm i -D core-js@2.5.7 resolves this for me. core-js@3.x does not have the module :-(
thx @Alex!! =)
Looks like @babel/polyfill is deprecated, as of c 7.4.0
npm i -S @babel/polyfill npm WARN deprecated @babel/polyfill@7.4.4: 🚨 As of Babel 7.4.0, this npm WARN deprecated package has been deprecated in favor of directly npm WARN deprecated including core-js/stable (to polyfill ECMAScript npm WARN deprecated features) and regenerator-runtime/runtime npm WARN deprecated (needed to use transpiled generator functions): npm WARN deprecated npm WARN deprecated > import "core-js/stable"; npm WARN deprecated > import "regenerator-runtime/runtime";
core-js@2.6.9 postinstall /Volumes/Development/Learning/React/react-starter/node_modules/core-js node scripts/postinstall || echo "ignore"
If we have have babel/polyfill, does babel now still transpile es5+ code or does it only add polyfills or does it do a mix of both ?
A few notes, babel/polyfill is now deprecated, so it's useful to still install it, but then you need to:
import "core-js/stable"; import "regenerator-runtime/runtime";
instead of importing @babel/polyfill.
Then, in your config, you need to add: targets: [ "last 2 versions", "not dead", "not < 2%", "not ie 11", ], useBuiltIns: "entry", corejs: "3.0.0",
the last line.
Otherwise it won't trim down your bundle and you'll be very confused as to why it wasn't changing, even though all it was throwing was a warning.