Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Parcel build includes all Core-js polyfills, or none at all

See original GitHub issue

🐛 bug report

When using .babelrc and specifying both targets and useBuiltIns: 'usage' I was expecting parcel to only include the core-js polyfills that were necessary to work with the targeted browsers. Instead all polyfills are including (making build size huge).

Alternatively, if import 'core-js/stable' is removed, then no polyfills are included.

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

package.json

{
  "name": "core-js-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.6.4",
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "core-js": "^3.3.6",
    "parcel-bundler": "^1.12.4"
  }
}

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "Chrome >75, IE 11",
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

index.js

import 'core-js/stable';

const str = 'Hello';

const arr = Array.from(str);

console.log(`The string contains an H: ${arr.includes('H')}`);

index-alternative.js

const str = 'Hello';

const arr = Array.from(str);

console.log(`The string contains an H: ${arr.includes('H')}`);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Test of Core JS</title>
</head>
<body>
  <div id="app">Loading</div>
  <script src="index.js"></script>
  <script src="index-alternative.js"></script>
</body>
</html>

🤔 Expected Behavior

I’m not exactly sure. I was expecting one of the index.js files to compile to a version where only the required polyfills was included, to polyfill the Array.prototype.From and Array.includes methods for IE 11:

require(“core-js/modules/es.array.from”);
require(“core-js/modules/es.array.includes”);
require(“core-js/modules/es.string.includes”);
require(“core-js/modules/es.string.iterator”);

😯 Current Behavior

When running parcel build index.html it outputs both js files:

filename	size	time	notes
dist/core-js-test.e032cec8.js	218.88 KB	297ms	includes the entirety of core-js
dist/index-alternative.5ae4bc85.js	1.22 KB	8ms	includes no polyfills at all

It’s not clear from the documentation whether it’s required to import core-js (I think it’s not?) but if core-js isn’t imported then the polyfills aren’t included in the built script.

🌍 Your Environment

Software	Version(s)
Parcel	1.12.4
Node	8.6.0
npm/Yarn	5.4.2
Operating System	Mac OS Sierra 10.12.6

Issue Analytics

State:
Created 4 years ago
Comments:8 (3 by maintainers)

Top GitHub Comments

8reactions

DeMoorJaspercommented, Nov 4, 2019

If you really wanna do all that work to save a small amount of data over the wire sure.

I’d just include it all

2reactions

maerteijncommented, Jun 2, 2020

A workaround is described in #3216 by modifying the babel config for an environment you’re building for. This works with Parcel 1.

Example:

.babelrc:

{
  "plugins": ["@babel/plugin-transform-object-assign"],
  "env": {
    "production": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "useBuiltIns": "usage",
            "corejs": 3
          }
        ]
      ],
    }
  }
}

Parcel 1 will use this configuration and babel will add the needed polyfill imports for you. The plugins: [] section with at least one plugin is needed to make this work.

The import in index.js:

import 'core-js/stable'

is only needed when you use "useBuiltIns": "entry" (see the entry section in the babel docs) which is a different cup of thea, I can’t get this to work with Parcel 1).

Now if you run:

parcel build index.js --no-minify

Babel will then add the following imports (and parcel the bundled modules):

require("core-js/modules/es.array.from");

require("core-js/modules/es.array.includes");

require("core-js/modules/es.string.includes");

require("core-js/modules/es.string.iterator");