You can list the targeted browsers from the browserslistrc with a little command
./node_modules/.bin/browserslist --config=.browserslistrc

Nice, didn't know that one!

in the webpack config file, you set the 'entry' to './src/index.js'
shouldn't it be './src/main.js' ? as the file we created in the src folder called main.js ?

Yes, you're right. Fixed the typo. The entry file will be named index.js

Or just use parcel. 😅

While it's great that there are tools like Parcel.js, I think it's good to know how these tools work under the hood.

Thanks,
This got babel working for me with the "entry" option.
When I try to run it with "usage" option I get these errors:
I'm using "Vue", and there currently is no webpack.config.js do you think I need to create it and set up loaders for it to work with the "usage" option?

WARNING Compiled with 4 warnings 6:12:19 PM

warning in ./src/components/PSubSection.vue?vue&type=script&lang=js&

"export 'MdButton' was not found in 'vue-material/dist/components'

warning in ./src/components/PSubSection.vue?vue&type=script&lang=js&

"export 'MdCard' was not found in 'vue-material/dist/components'

"export 'MdIcon' was not found in 'vue-material/dist/components'

warning in ./src/components/PSubSection.vue?vue&type=script&lang=js&

"export 'default' (imported as 'VueMaterial') was not found in 'vue-material/dist/vue-material'


Thanks! It helped me at least a bit I believe. :)
And by the way what also seems important for people moving from previous Babel version is that issue (maybe just a corner case) connected with ".babelrc": https://babeljs.io/docs/en/... , which I know of from: https://github.com/babel/ba... . In short: it seems safer (and sometimes more comfortable or maybe even necessary) to use "babel.config.js" instead of ".babelrc". Especially if You need to include some package from "node_modules" - "vue-echarts" for example.

great job! thank you for that.,...

With Babel 7.4.x, is there really any benefit in using useBuiltIns: 'entry' or the default useBuiltIns: false?

I am using a template engine to make the entry files and the template code needs to be polyfilled, but it seems things are happening in the wrong order, The template files have the polyfills imports inserted as import statement, but import isn't supported..

If you want to handle your imports individually rather then let Babel import them, false would be the way to go. Since the usage option is still 'experimental', you could switch to entry when hitting some bugs on the usage option. My default would be usage though. As for the import statement not being resolved, this could have several causes. If you provide a repo or something I would be happy to have a look at it.

I found out that the reason «usage» didn’t work in my specific case was that Babel was adding the core-js imports with «import ‘’»-syntax in the entry files. These import statements weren’t transpiled to supported syntax (likely because they were handlebar-templates, so the polyfills were added too late in the toolchain).

I won’t be trying to fix this until Webpack 5 hits LTS or I need too. Now I am just loading all the polyfills up front in all entry-points and the difference is negligible in our code base. But thanks!

I followed all the steps above and still got the following error:
Module not found: Error: Can't resolve 'core-js/modules/es6.array.from'

Dominique Denie I made a small post on how to update your project to Babel 7.4, you can find it here

There seems to be a big update in the core-js package that handles a lot of the polyfilling. I'm assuming you have installed Babel 7.4? If you want to test this quickly, you can go with babel 7.3, I'll update the article with a mention of the breaking changes for 7.4.

Wonderful post. Helped me understand how to configure polyfills

Thank you so much for this. It's the most informative and to-the-point article on this subject that I've read. Got me up and running and understanding. Nice one.

Thanks! If you have any other things you would like to see me write about, let me know.