10

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']
}
Alf
  • 1,414
  • 1
  • 15
  • 27

1 Answers1

3

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.

Roman Maksimov
  • 1,537
  • 1
  • 9
  • 14
  • My question is, specifically, if `useBuiltIns` is applied if instead of imports I add `babel-polyfill` to my entry point in Webpack: https://babeljs.io/docs/usage/polyfill/ – Alf Apr 25 '17 at 22:13
  • Try to understand the answer before voting down. You may ask if it's not clear. I've expanded the answer to explain more precisely. – Roman Maksimov Apr 25 '17 at 23:15
  • I voted down because *This answer is not useful* (as per Stack Overflow guidelines). The problem with your original answer is that you’re explaining why you don’t need to have `babel-polyfill` in the entry point if you have either `require("babel-polyfill");` or `import "babel-polyfill";`. The incorrect assumption that I probably wasn’t explicit about is that my *`./src/app.js` already includes some code with requirements*. Thank you for clarifying in your third paragraph. So the answer is that they’re different and probably using `babel-polyfill` in the entry point is worse. – Alf Apr 26 '17 at 11:07
  • I concluded it is worse because it makes the bundle bigger. However, from a software engineering point of view, I think it’s cleaner to have polyfills in Webpack instead of in your app code. Maybe there’s no *best* option, as each one has its pros and cons. – Alf Apr 26 '17 at 11:10