Target browser option in useBuiltIns/babel polyfill

Question

I want to use 'useBuiltIns' option to load polyfills only for IE11 browser.

[
    '@babel/preset-env',
    {
        useBuiltIns: 'entry',
        debug: true,
        modules: false,
        corejs: '3',
        targets: {
            node: true,
            browsers: [
                'ie >= 11',
            ]
        },
    },
]

Here is the entry file import.

import "core-js/stable";
import "regenerator-runtime/runtime";

However, I can see that the entry point importing of core-js is loading all the polyfills for chrome and safari as well, which increases the file size. How can I specify the options to only load polyfill for IE? I tried adding specific version of chrome without success.

Try to use "[useBuiltIns: 'usage'](https://babeljs.io/docs/en/babel-preset-env#usebuiltins)", in this case polyfills will be added automatically when the usage of some feature is unsupported in target environment. — Zhi Lv, Jun 15 '20 at 06:55

score 1 · Answer 1 · answered Jun 13 '20 at 03:38

Babel cherry picks polyfills for you according to what you have configured. Change below if you only want to add polyfills only for the code, you have in your codebase which need transpiling. entry setting will add everything

{ useBuiltIns: 'usage',

Your target should have only included browser defined , check for syntax. for e.g.

  "targets": {
    "chrome": "58",
    "ie": "11"
  }

score 0 · Answer 2 · answered Jun 12 '20 at 20:52

How can I specify the options to only load polyfill for IE? I tried adding specific version of chrome without success.

I think you might be interested in dynamic import/tree shaking.

Your entry file import always loads polyfills ( Ideally polyfills detect if browser already supports API and if not implements it. There are also options to force polyfill.)

The code for that approach might look like

if(isIE11()) {
  require("core-js/stable"); // or import("core-js/stable")
  require("regenerator-runtime/runtime"); // or import("regenerator-runtime/runtime")
}

Also

However, I can see that the entry point importing of core-js is loading all the polyfills for chrome and safari as well, which increases the file size.

IE11 doesnt support await/async and the code is then transpiled to generators and from that to ES5 functions with state. Lamda functions also need to be transpiled. Those things already increase the file size which you seem to care about

Target browser option in useBuiltIns/babel polyfill

2 Answers2