Missing useBuiltIns (babel-polyfill env transform) support.

[samsch]

This a 🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": [
            "last 2 Chrome versions",
            "last 2 Edge versions",
            "last 2 Firefox versions",
            "last 2 iOS versions"
          ]
        },
        "useBuiltIns": true,
        "modules": false
      }
    ]
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    ["transform-react-jsx", { "pragma": "h" }]
  ],
  "env": {
    "test": {
      "plugins": ["dynamic-import-node"]
    }
  }
}

Test app repo. Note that the .babelrc file env browserlist does not include IE, nor should it include regenerator or compile generator functions.

🤔 Expected Behavior

The useBuiltIns babel-preset-env option transforms import 'babel-polyfill'; into only the necessary individual polyfill imports. Notably, if your browserlist has support for generators, it does not import the regenerator runtime.

😯 Current Behavior

Running npx babel-cli src/index.js | less (Linux command) shows the correct output, however, if you view/search in the compiled output from Parcel (I've been testing with npx parcel build-dev --no-cache src/index.html), you can see that while the babel transform is correct (generators are not compiled to use regenerator), the regenerator runtime is still included from babel-polyfill.

💁 Possible Solution

I'm not familiar with Parcel internals, but one possible thought is that Parcel might be transforming import 'babel-polyfill'; into something babel-preset-env doesn't recognize.

🔦 Context

The main problem here is large unused code. Without polyfills, my example app is 4.25KB. Importing babel-polyfill (and getting all of it) brings the app to 148.23KB. If I manually use the individual polyfill imports (copied from babel-cli output), I get 31.08KB.

(I'm only picking on regenerator here because it's the one I remember the easiest, and it's easy to search for in the output (no false positives), so it's an easy test.)

🌍 Your Environment

Package versions in package.json

Software	Version(s)
Node	v9.3.0
npm	v5.6.0
Operating System	Xubuntu 17.10

[samsch]

Just making a small note that the repo is missing the explicit babel-preset-env dependency (an oversight), but this made no difference in my tests (I checked subsequently).

[devongovett]

Good idea. Want to add it? Code is here:

parcel/src/transforms/babel.js

Lines 242 to 255 in 0d9d14c

	async function getEnvPlugins(targets) {
	if (!targets) {
	return null;
	}
	let key = JSON.stringify(targets);
	if (envCache.has(key)) {
	return envCache.get(key);
	}
	let plugins = presetEnv.default({}, {targets, modules: false}).plugins;
	envCache.set(key, plugins);
	return plugins;
	}

[samsch]

A simple add to line 252...

let plugins = presetEnv.default({}, {targets, modules: false, useBuiltIns: true}).plugins;

...works, but enables useBuiltIns for all places where babel is used (or so it appears).

It could be modified so that useBuiltIns is only added for the app source. I think the simple implementation would be an extra boolean flag argument to getEnvPlugins:

// Line 219:
let targetEnv = await getEnvPlugins(targetEngines, true);

// Line 228
let sourceEnv = (await getEnvPlugins(sourceEngines, false)) || targetEnv;

// Line 242
async function getEnvPlugins(targets, useBuiltIns) {

// Line 252 (prettier splits this into a couple lines)
let plugins = presetEnv.default({}, {targets, modules: false, useBuiltIns: useBuiltIns ? 'entry' : false}).plugins;

#878 takes this approach.

[FDiskas]

In my case I got

Uncaught ReferenceError: regeneratorRuntime is not defined

maybe it's related to this issue

[samsch]

@FDiskas Mostly likely not, no. That sounds like it's possibly you forgot to import babel-polyfill.

[felixfbecker]

What exactly do I need to import? It looks like import '@babel/polyfill', which is what the Babel docs say, but that dependency doesn't exist in Parcel. Do I need to add it manually? Would be nice to have docs on this.