1. 21
    Target specific browsers with babel-preset-env and the babel pollyfill
    7m 1s

Target specific browsers with babel-preset-env and the babel pollyfill

Andy Van Slaars
InstructorAndy Van Slaars

Share this video with your friends

Send Tweet

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

mark connelly
mark connelly
~ 2 years ago

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.

Chris
Chris
~ 2 years ago

The setting should be 'not IE 11' (space between IE and 11).

Edwin
Edwin
~ 2 years ago

These series of lectures contain amazing tips!

Thank you Andy!!

Alex
Alex
~ 2 years ago

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

Alex
Alex
~ 2 years ago

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 :-(

Fer
Fer
~ 2 years ago

thx @Alex!! =)

Shripada Hebbar
Shripada Hebbar
~ 2 years ago

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"

Ahmed Soliman
Ahmed Soliman
~ a year ago

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 ?

Bevin Hernandez
Bevin Hernandez
~ a year ago

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.