Confused about useBuiltIns option of @babel/preset-env (using Browserslist Integration)
1) Do I need to use that useBuiltIns: "entry" option?
Yes, if you want to include polyfills based on your target environment.
TL;DR
There're basically 3 options for useBuiltIns:
"entry": when using this option, @babel/preset-env replaces direct imports of core-js to imports of only the specific modules required for a target environment.
That means you need to add
import "core-js/stable";
import "regenerator-runtime/runtime";
to your entry point and these lines will be replaced by only required polyfills. When targeting chrome 72, it will be transformed by @babel/preset-env to
import "core-js/modules/es.array.unscopables.flat";
import "core-js/modules/es.array.unscopables.flat-map";
import "core-js/modules/es.object.from-entries";
import "core-js/modules/web.immediate";
"usage": in this case polyfills will be added automatically when the usage of some feature is unsupported in target environment. So:
const set = new Set([1, 2, 3]);
[1, 2, 3].includes(2);
in browsers like ie11 will be replaced with
import "core-js/modules/es.array.includes";
import "core-js/modules/es.array.iterator";
import "core-js/modules/es.object.to-string";
import "core-js/modules/es.set";
const set = new Set([1, 2, 3]);
[1, 2, 3].includes(2);
In case target browser is latest chrome, no transformations will apply.
That's personally my chosen weapon as there's no need to include anything (core-js or regenerator) in source code as only required polyfills will be added automatically based on target environment set in browserlist.
false: that's the default value when no polyfills are added automatically.
2) Do I need to install @babel/polyfill package and start my vendors.js with require("@babel/polyfill"); ?
Yes for environment prior to babel v7.4 and core-js v3.
TL;DR
No. Starting from babel v7.4 and core-js v3 (which is used for polyfilling under the hood) @babel/preset-env will add the polyfills only when it know which of them required and in the recommended order.
Moreover @babel/polyfill is considered as deprecated in favor of separate core-js and regenerator-runtime inclusions.
So using of useBuiltIns with options other than false should solve the issue.
Don't forget to add core-js as a dependency to your project and set its version in @babel/preset-env under corejs property.
3) What if I omit both?
As @PlayMa256 already answered, there will be no polyfills.
More detailed and whole info con be found at core-js creator's page
Also please feel free to play with babel sandbox
1) Do I need to use that useBuiltIns: "entry" option?
Yes, according to babel docs:
"This option enables a new plugin that replaces the statement import "@babel/polyfill" or require("@babel/polyfill") with individual requires for @babel/polyfill based on environment" - Basically, includes all needed polyfills (when you have @babel/polyfill installed when needed).
2) Do I need to install @babel/polyfill package and start my vendors.js with require("@babel/polyfill"); ?
You do need to install @babel/polyfill, it does not come by default on babel. You have to include that on your entrypoint or add an import at the top of your entrypoint.
3) What if I omit both?
You won't have polyfills.