Is it better to have polyfills as import statements with babel-preset-env or add them in entries at webpack.config.js?

Question

babel-preset-env offers the option useBuiltIns to apply it to babel-polyfill and transform import 'babel-polyfill' to specific, environment-based, import 'core-js/whatever.

Is this transformation applied if I add babel-polyfill in my Webpack entry section (see example below), or in that case useBuiltIns is ignored and replaced by all possible imports?

entry: {
  app: ['babel-polyfill', './src/app.js']
}

Answer 1

It works when you are specifing:

"presets": [ ..., "env" ]

It doesn't related to the entry point as your ./src/app.js already includes some code with requirements, I guess. I just don't understand what do you want to achieve by adding babel-polyfill to the entry point, but seems it no effect in this case.

I'll try to elaborate how it works. There is a babel-preset-env plugin which prepares the list of transformation plugins and polyfills. This list is used by transform-polyfill-require-plugin which look for import and require statements and replaces it by list of environment-specific modules.

It doesn't related to the entry point at all. By adding the babel-polyfill you just add it's code into your bundle. So the transform-polyfill-require-plugin doesn't work there anyhow. It's possible to check it via a simple debugging.

And you don't need it really. You can just add require("babel-polyfill"); once in your app as it's noticed in the docs. You even can't import babel-polyfill twice as it might cause an error as it writes down itself into the global and has a check for the collision.