Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webpack, Babel 7.4.0 and core-js 3

Given the following

package.json

{
    "name": "webpack-babel7",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "devDependencies": {
        "@babel/core": "^7.4.4",
        "@babel/preset-env": "^7.4.4",
        "babel-loader": "^8.0.5",
        "webpack": "^4.30.0",
        "webpack-cli": "^3.3.2"
    },
    "dependencies": {
        "core-js": "3"
    }
}

babel.config.js

const presets = [
    [
        '@babel/env',
        {
            targets: {
                chrome: '74',
            },
            useBuiltIns: 'usage',
            debug: true,
            corejs: 3,
        },
    ],
]

module.exports = { presets }

webpack.config.js

const path = require('path')

module.exports = {
    entry: './src/index.js',
    mode: 'production',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                },
            },
        ],
    },
}

src/index.js

import 'core-js/stable'

var array = [1, 2, 3]

Array.from(array).forEach($item => {
    console.log($item)
})

After running webpack

.\node_modules\.bin\webpack .\src\index.js

I see the following output indicating that no pollyfills were added as chrome 74 supports foreach etc

@babel/preset-env: `DEBUG` option

Using targets:
{
  "chrome": "74"
}

Using modules transform: auto

Using plugins:
  syntax-async-generators { "chrome":"74" }
  syntax-object-rest-spread { "chrome":"74" }
  proposal-unicode-property-regex { "chrome":"74" }
  proposal-json-strings { "chrome":"74" }
  proposal-optional-catch-binding { "chrome":"74" }
  transform-named-capturing-groups-regex { "chrome":"74" }

Using polyfills with `usage` option:

Based on your code and targets, core-js polyfills were not added.

However when looking at dist/main.js it's huge and appears to import a number of pollyfills

dist/main.js

/***/ "./node_modules/core-js/es/index.js":
/*!******************************************!*\
  !*** ./node_modules/core-js/es/index.js ***!
  \******************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

eval("__webpack_require__(/*! ../modules/es.symbol */ \"./node_modules/core-js/modules/es.symbol.js\");\n__webpack_require__(/*! ../modules/es.symbol.async-iterator */ \"./node_modules/core-js/modules/es.symbol.async-iterator.js\");\n__webpack_require__(/*! ../modules/es.symbol.description */ \"./node_modules/core-js/modules/es.symbol.description.js\");\n__webpack_require__(/*! ../modules/es.symbol.has-instance */ \"./node_modules/core-js/modules/es.symbol.has-instance.js\");\n__webpack_require__(/*! ../modules/es.symbol.is-concat-spreadable */ \"./node_modules/core-js/modules/es.symbol.is-concat-spreadable.js\");\n__webpack_require__(/*! ../modules/es.symbol.iterator */ \"./node_modules/core-js/modules/es.symbol.iterator.js\");\n__webpack_require__(/*! ../modules/es.symbol.match */ \"./node_modules/core-js/modules/es.symbol.match.js\");\n__webpack_require__(/*! ../modules/es.symbol.replace */ \"./node_modules/core-js/modules/es.symbol.replace.js\");\n__webpack_require__(/*! ../modules/es.symbol.search */ \"./node_modules/core-js/modules/es.symbol.search.js\");\n__webpack_require__(/*! ../modules/es.symbol.species */ \"./node_modules/core-js/modules/es.symbol.species.js\");\n__webpack_require__(/*! ../modules/es.symbol.split */ \"./node_modules/core-js/modules/es.symbol.split.js\");\n__webpack_require__(/*! ../modules/es.symbol.to-primitive */ \"./node_modules/core-js/modules/es.symbol.to-primitive.js\");\n__webpack_require__(/*! ../modules/es.symbol.to-string-tag */ \"./node_modules/core-js/modules/es.symbol.to-string-tag.js\");\n__webpack_require__(/*! ../modules/es.symbol.unscopables */ \"./node_modules/core-js/modules/es.symbol.unscopables.js\");\n__webpack_require__(/*! ../modules/es.object.assign */ \"./node_modules/core-js/modules/es.object.assign.js\");\n__webpack_require__(/*! ../modules/es.object.create */ \"./node_modules/core-js/modules/es.object.create.js\");\n__webpack_require__(/*! ../modules/es.object.define-property */ \"./node_modules/core-js/modules/es.object.define-property.js\");\n__webpack_require__(/*! ../modules/es.object.define-properties */ \"./node_modules/core-js/modules/es.object.define-properties.js\");\n__webpack_require__(/*! ../modules/es.object.entries */ \"./node_modules/core-js/modules/es.object.entries.js\");\n__webpack_require__(/*! ../modules/es.object.freeze */ \"./node_modules/core-js/modules/es.object.freeze.js\");\n__webpack_require__(/*! ../modules/es.object.from-entries */ \"./node_modules/core-js/modules/es.object.from-entries.js\");\n__webpack_require__(/*! ../modules/es.object.get-own-property-descriptor */ \"./node_modules/core-js/modules/es.object.get-own-property-descriptor.js\");\n__webpack_require__(/*! ../modules/es.object.get-own-property-descriptors */ \"./node_modules/core-js/modules/es.object.get-own-property-descriptors.js\");\n__webpack_require__(/*! ../modules/es.object.get-own-property-names */ \"./node_modules/core-js/modules/es.object.get-own-property-names.js\");\n__webpack_require__(/*! ../modules/es.object.get-prototype-of */ \"./node_modules/core-js/modules/es.object.get-prototype-of.js\");\n__webpack_require__(/*! ../modules/es.object.is */ \"./node_modules/core-js/modules/es.object.is.js\");\n__webpack_require__(/*! ../modules/es.object.is-extensible */ \"./node_modules/core-js/modules/es.object.is-extensible.js\");\n__webpack_require__(/*! ../modules/es.object.is-frozen */ \"./node_modules/core-js/modules/es.object.is-frozen.js\");\n__webpack_require__(/*! ../modules/es.object.is-sealed */ \"./node_modules/core-js/modules/es.object.is-sealed.js\");\n__webpack_require__(/*! ../modules/es.object.keys */ \"./node_modules/core-js/modules/es.object.keys.js\");\n__webpack_require__(/*! ../modules/es.object.prevent-extensions */ \"./node_modules/core-js/modules/es.object.prevent-extensions.js\");\n__webpack_require__(/*! ../modules/es.object.seal */ \"./node_modules/core-js/modules/es.object.seal.js\");\n__webpack_require__(/*! ../modules/es.object.set-prototype-of */ \"./node_modules/core-js/modules/es.object.set-prototype-of.js\");\n__webpack_require__(/*! ../modules/es.object.values */ \"./node_modules/core-js/modules/es.object.values.js\");\n__webpack_require__(/*! ../modules/es.object.to-string */ \"./node_modules/core-js/modules/es.object.to-string.js\");\n__webpack_require__(/*! ../modules/es.object.define-getter */ \"./node_modules/core-js/modules/es.object.define-getter.js\");\n__webpack_require__(/*! ../modules/es.object.define-setter */ \"./node_modules/core-js/modules/es.object.define-setter.js\");\n__webpack_require__(/*! ../modules/es.object.lookup-getter */ \"./node_modules/core-js/modules/es.object.lookup-getter.js\");\n__webpack_require__(/*! ../modules/es.object.lookup-setter */ \"./node_modules/core-js/modules/es.object.lookup-setter.js\");\n__webpack_require__(/*! ../modules/es.function.bind */ \"./node_modules/core-js/modules/es.function.bind.js\");\n__webpack_require__(/*! ../modules/es.function.name */ \"./node_modules/core-js/modules/es.function.name.js\");\n__webpack_require__(/*! ../modules/es.function.has-instance */ \"./node_modules/core-js/modules/es.function.has-instance.js\");\n__webpack_require__(/*! ../modules/es.array.from */ \"./node_modules/core-js/modules/es.array.from.js\");\n__webpack_require__(/*! ../modules/es.array.is-array */ \"./node_modules/core-js/modules/es.array.is-array.js\");\n__webpack_require__(/*! ../modules/es.array.of */ \"./node_modules/core-js/modules/es.array.of.js\");\n__webpack_require__(/*! ../modules/es.array.concat */ \"./node_modules/core-js/modules/es.array.concat.js\");\n__webpack_require__(/*! ../modules/es.array.copy-within */ \"./node_modules/core-js/modules/es.array.copy-within.js\");\n__webpack_require__(/*! ../modules/es.array.every */ \"./node_modules/core-js/modules/es.array.every.js\");\n__webpack_require__(/*! ../modules/es.array.fill */ \"./node_modules/core-js/modules/es.array.fill.js\");\n__webpack_require__(/*! ../modules/es.array.filter */ \"./node_modules/core-js/modules/es.array.filter.js\");\n__webpack_require__(/*! ../modules/es.array.find */ \"./node_modules/core-js/modules/es.array.find.js\");\n__webpack_require__(/*! ../modules/es.array.find-index */ \"./node_modules/core-js/modules/es.array.find-index.js\");\n__webpack_require__(/*! ../modules/es.array.flat */ \"./node_modules/core-js/modules/es.array.flat.js\");\n__webpack_require__(/*! ../modules/es.array.flat-map */ \"./node_modules/core-js/modules/es.array.flat-map.js\");\n__webpack_require__(/*! ../modules/es.array.for-each */ \"./node_modules/core-js/modules/es.array.for-each.js\");\n__webpack_require__(/*! ../modules/es.array.includes */ \"./node_modules/core-js/modules/es.array.includes.js\");\n__webpack_require__(/*! ../modules/es.array.index-of */ \"./node_modules/core-js/modules/es.array.index-of.js\");\n__webpack_require__(/*! ../modules/es.array.join */ \"./node_modules/core-js/modules/es.array.join.js\");\n__webpack_require__(/*! ../modules/es.array.last-index-of */ \"./node_modules/core-js/modules/es.array.last-index-of.js\");\n__webpack_require__(/*! ../modules/es.array.map */ \"./node_modules/core-js/modules/es.array.map.js\");\n__webpack_require__(/*! ../modules/es.array.reduce */ \"./node_modules/core-js/modules/es.array.reduce.js\");\n__webpack_require__(/*! ../modules/es.array.reduce-right */ \"./node_modules/core-js/modules/es.array.reduce-right.js\");\n__webpack_require__(/*! ../modules/es.array.reverse */ \"./node_modules/core-js/modules/es.array.reverse.js\");\n__webpack_require__(/*! ../modules/es.array.slice */ \"./node_modules/core-js/modules/es.array.slice.js\");\n__webpack_require__(/*! ../modules/es.array.some */ \"./node_modules/core-js/modules/es.array.some.js\");\n__webpack_require__(/*! ../modules/es.array.sort */ \"./node_modules/core-js/modules/es.array.sort.js\");\n__webpack_require__(/*! ../modules/es.array.splice */ \"./node_modules/core-js/modules/es.array.splice.js\");\n__webpack_require__(/*! ../modules/es.array.species */ \"./node_modules/core-js/modules/es.array.species.js\");\n__webpack_require__(/*! ../modules/es.array.unscopables.flat */ \"./node_modules/core-js/modules/es.array.unscopables.flat.js\");\n__webpack_require__(/*! ../modules/es.array.unscopables.flat-map */ \"./node_modules/core-js/modules/es.array.unscopables.flat-map.js\");\n__webpack_require__(/*! ../modules/es.array.iterator */ \"./node_modules/core-js/modules/es.array.iterator.js\");\n__webpack_require__(/*! ../modules/es.string.from-code-point */ \"./node_modules/core-js/modules/es.string.from-code-point.js\");\n__webpack_require__(/*! ../modules/es.string.raw */ \"./node_modules/core-js/modules/es.string.raw.js\");\n__webpack_require__(/*! ../modules/es.string.code-point-at */ \"./node_modules/core-js/modules/es.string.code-point-at.js\");\n__webpack_require__(/*! ../modules/es.string.ends-with */ \"./node_modules/core-js/modules/es.string.ends-with.js\");\n__webpack_require__(/*! ../modules/es.string.includes */ \"./node_modules/core-js/modules/es.string.includes.js\");\n__webpack_require__(/*! ../modules/es.string.match */ \"./node_modules/core-js/modules/es.string.match.js\");\n__webpack_require__(/*! ../modules/es.string.pad-end */ \"./node_modules/core-js/modules/es.string.pad-end.js\");\n__webpack_require__(/*! ../modules/es.string.pad-start */ \"./node_modules/core-js/modules/es.string.pad-start.js\");\n__webpack_require__(/*! ../modules/es.string.repeat */ \"./node_modules/core-js/modules/es.string.repeat.js\");\n__webpack_require__(/*! ../modules/es.string.replace */ \"./node_modules/core-js/modules/es.string.replace.js\");\n__webpack_require__(/*! ../modules/es.string.search */ \"./node_modules/core-js/modules/es.string.search.js\");\n__webpack_require__(/*! ../modules/es.string.split */ \"./node_modules/core-js/modules/es.string.split.js\");\n__webpack_require__(/*! ../modules/es.string.starts-with */ \"./node_modules/core-js/modules/es.string.starts-with.js\");\n__webpack_require__(/*! ../modules/es.string.trim */ \"./node_modules/core-js/modules/es.string.trim.js\");\n__webpack_require__(/*! ../modules/es.string.trim-start */ \"./node_modules/core-js/modules/es.string.trim-start.js\");\n__webpack_require__(/*! ../modules/es.string.trim-end */ \"./node_modules/core-js/modules/es.string.trim-end.js\");\n__webpack_require__(/*! ../modules/es.string.iterator */ \"./node_modules/core-js/modules/es.string.iterator.js\");\n__webpack_require__(/*! ../modules/es.string.anchor */ \"./node_modules/core-js/modules/es.string.anchor.js\");\n__webpack_require__(/*! ../modules/es.string.big */ \"./node_modules/core-js/modules/es.string.big.js\");\n__webpack_require__(/*! ../modules/es.string.blink */ \"./node_modules/core-js/modules/es.string.blink.js\");\n__webpack_require__(/*! ../modules/es.string.bold */ \"./node_modules/core-js/modules/es.string.bold.js\");\n__webpack_require__(/*! ../modules/es.string.fixed */ \"./node_modules/core-js/modules/es.string.fixed.js\");\n__webpack_require__(/*! ../modules/es.string.fontcolor */ \"./node_modules/core-js/modules/es.string.fontcolor.js\");\n__webpack_require__(/*! ../modules/es.string.fontsize */ \"./node_modules/core-js/modules/es.string.fontsize.js\");\n__webpack_require__(/*! ../modules/es.string.italics */ \"./node_modules/core-js/modules/es.string.italics.js\");\n__webpack_require__(/*! ../modules/es.string.link */ \"./node_modules/core-js/modules/es.string.link.js\");\n__webpack_require__(/*! ../modules/es.string.small */ \"./node_modules/core-js/modules/es.string.small.js\");\n__webpack_require__(/*! ../modules/es.string.strike */ \"./node_modules/core-js/modules/es.string.strike.js\");\n__webpack_require__(/*! ../modules/es.string.sub */ \"./node_modules/core-js/modules/es.string.sub.js\");\n__webpack_require__(/*! ../modules/es.string.sup */ \"./node_modules/core-js/modules/es.string.sup.js\");\n__webpack_require__(/*! ../modules/es.regexp.constructor */ \"./node_modules/core-js/modules/es.regexp.constructor.js\");\n__webpack_require__(/*! ../modules/es.regexp.exec */ \"./node_modules/core-js/modules/es.regexp.exec.js\");\n__webpack_require__(/*! ../modules/es.regexp.flags */ \"./node_modules/core-js/modules/es.regexp.flags.js\");\n__webpack_require__(/*! ../modules/es.regexp.to-string */ \"./node_modules/core-js/modules/es.regexp.to-string.js\");\n__webpack_require__(/*! ../modules/es.parse-int */ \"./node_modules/core-js/modules/es.parse-int.js\");\n__webpack_require__(/*! ../modules/es.parse-float */ \"./node_modules/core-js/modules/es.parse-float.js\");\n__webpack_require__(/*! ../modules/es.number.constructor */ \"./node_modules/core-js/modules/es.number.constructor.js\");\n__webpack_require__(/*! ../modules/es.number.epsilon */ \"./node_modules/core-js/modules/es.number.epsilon.js\");\n__webpack_require__(/*! ../modules/es.number.is-finite */ \"./node_modules/core-js/modules/es.number.is-finite.js\");\n__webpack_require__(/*! ../modules/es.number.is-integer */ \"./node_modules/core-js/modules/es.number.is-integer.js\");\n__webpack_require__(/*! ../modules/es.number.is-nan */ \"./node_modules/core-js/modules/es.number.is-nan.js\");\n__webpack_require__(/*! ../modules/es.number.is-safe-integer */ \"./node_modules/core-js/modules/es.number.is-safe-integer.js\");\n__webpack_require__(/*! ../modules/es.number.max-safe-integer */ \"./node_modules/core-js/modules/es.number.max-safe-integer.js\");\n__webpack_require__(/*! ../modules/es.number.min-safe-integer */ \"./node_modules/core-js/modules/es.number.min-safe-integer.js\");\n__webpack_require__(/*! ../modules/es.number.parse-float */ \"./node_modules/core-js/modules/es.number.parse-float.js\");\n__webpack_require__(/*! ../modules/es.number.parse-int */ \"./node_modules/core-js/modules/es.number.parse-int.js\");\n__webpack_require__(/*! ../modules/es.number.to-fixed */ \"./node_modules/core-js/modules/es.number.to-fixed.js\");\n__webpack_require__(/*! ../modules/es.number.to-precision */ \"./node_modules/core-js/modules/es.number.to-precision.js\");\n__webpack_require__(/*! ../modules/es.math.acosh */ \"./node_modules/core-js/modules/es.math.acosh.js\");\n__webpack_require__(/*! ../modules/es.math.asinh */ \"./node_modules/core-js/modules/es.math.asinh.js\");\n__webpack_require__(/*! ../modules/es.math.atanh */ \"./node_modules/core-js/modules/es.math.atanh.js\");\n__webpack_require__(/*! ../modules/es.math.cbrt */ \"./node_modules/core-js/modules/es.math.cbrt.js\");\n__webpack_require__(/*! ../modules/es.math.clz32 */ \"./node_modules/core-js/modules/es.math.clz32.js\");\n__webpack_require__(/*! ../modules/es.math.cosh */ \"./node_modules/core-js/modules/es.math.cosh.js\");\n__webpack_require__(/*! ../modules/es.math.expm1 */ \"./node_modules/core-js/modules/es.math.expm1.js\");\n__webpack_require__(/*! ../modules/es.math.fround */ \"./node_modules/core-js/modules/es.math.fround.js\");\n__webpack_require__(/*! ../modules/es.math.hypot */ \"./node_modules/core-js/modules/es.math.hypot.js\");\n__webpack_require__(/*! ../modules/es.math.imul */ \"./node_modules/core-js/modules/es.math.imul.js\");\n__webpack_require__(/*! ../modules/es.math.log10 */ \"./node_modules/core-js/modules/es.math.log10.js\");\n__webpack_require__(/*! ../modules/es.math.log1p */ \"./node_modules/core-js/modules/es.math.log1p.js\");\n__webpack_require__(/*! ../modules/es.math.log2 */ \"./node_modules/core-js/modules/es.math.log2.js\");\n__webpack_require__(/*! ../modules/es.math.sign */ \"./node_modules/core-js/modules/es.math.sign.js\");\n__webpack_require__(/*! ../modules/es.math.sinh */ \"./node_modules/core-js/modules/es.math.sinh.js\");\n__webpack_require__(/*! ../modules/es.math.tanh */ \"./node_modules/core-js/modules/es.math.tanh.js\");\n__webpack_require__(/*! ../modules/es.math.to-string-tag */ \"./node_modules/core-js/modules/es.math.to-string-tag.js\");\n__webpack_require__(/*! ../modules/es.math.trunc */ \"./node_modules/core-js/modules/es.math.trunc.js\");\n__webpack_require__(/*! ../modules/es.date.now */ \"./node_modules/core-js/modules/es.date.now.js\");\n__webpack_require__(/*! ../modules/es.date.to-json */ \"./node_modules/core-js/modules/es.date.to-json.js\");\n__webpack_require__(/*! ../modules/es.date.to-iso-string */ \"./node_modules/core-js/modules/es.date.to-iso-string.js\");\n__webpack_require__(/*! ../modules/es.date.to-string */ \"./node_modules/core-js/modules/es.date.to-string.js\");\n__webpack_require__(/*! ../modules/es.date.to-primitive */ \"./node_modules/core-js/modules/es.date.to-primitive.js\");\n__webpack_require__(/*! ../modules/es.json.to-string-tag */ \"./node_modules/core-js/modules/es.json.to-string-tag.js\");\n__webpack_require__(/*! ../modules/es.promise */ \"./node_modules/core-js/modules/es.promise.js\");\n__webpack_require__(/*! ../modules/es.promise.finally */ \"./node_modules/core-js/modules/es.promise.finally.js\");\n__webpack_require__(/*! ../modules/es.map */ \"./node_modules/core-js/modules/es.map.js\");\n__webpack_require__(/*! ../modules/es.set */ \"./node_modules/core-js/modules/es.set.js\");\n__webpack_require__(/*! ../modules/es.weak-map */ \"./node_modules/core-js/modules/es.weak-map.js\");\n__webpack_require__(/*! ../modules/es.weak-set */ \"./node_modules/core-js/modules/es.weak-set.js\");\n__webpack_require__(/*! ../modules/es.array-buffer.constructor */ \"./node_modules/core-js/modules/es.array-buffer.constructor.js\");\n__webpack_require__(/*! ../modules/es.array-buffer.is-view */ \"./node_modules/core-js/modules/es.array-buffer.is-view.js\");\n__webpack_require__(/*! ../modules/es.array-buffer.slice */ \"./node_modules/core-js/modules/es.array-buffer.slice.js\");\n__webpack_require__(/*! ../modules/es.data-view */ \"./node_modules/core-js/modules/es.data-view.js\");\n__webpack_require__(/*! ../modules/es.typed-array.int8-array */ \"./node_modules/core-js/modules/es.typed-array.int8-array.js\");\n__webpack_require__(/*! ../modules/es.typed-array.uint8-array */ \"./node_modules/core-js/modules/es.typed-array.uint8-array.js\");\n__webpack_require__(/*! ../modules/es.typed-array.uint8-clamped-array */ \"./node_modules/core-js/modules/es.typed-array.uint8-clamped-array.js\");\n__webpack_require__(/*! ../modules/es.typed-array.int16-array */ \"./node_modules/core-js/modules/es.typed-array.int16-array.js\");\n__webpack_require__(/*! ../modules/es.typed-array.uint16-array */ \"./node_modules/core-js/modules/es.typed-array.uint16-array.js\");\n__webpack_require__(/*! ../modules/es.typed-array.int32-array */ \"./node_modules/core-js/modules/es.typed-array.int32-array.js\");\n__webpack_require__(/*! ../modules/es.typed-array.uint32-array */ \"./node_modules/core-js/modules/es.typed-array.uint32-array.js\");\n__webpack_require__(/*! ../modules/es.typed-array.float32-array */ \"./node_modules/core-js/modules/es.typed-array.float32-array.js\");\n__webpack_require__(/*! ../modules/es.typed-array.float64-array */ \"./node_modules/core-js/modules/es.typed-array.float64-array.js\");\n__webpack_require__(/*! ../modules/es.typed-array.from */ \"./node_modules/core-js/modules/es.typed-array.from.js\");\n__webpack_require__(/*! ../modules/es.typed-array.of */ \"./node_modules/core-js/modules/es.typed-array.of.js\");\n__webpack_require__(/*! ../modules/es.typed-array.copy-within */ \"./node_modules/core-js/modules/es.typed-array.copy-within.js\");\n__webpack_require__(/*! ../modules/es.typed-array.every */ \"./node_modules/core-js/modules/es.typed-array.every.js\");\n__webpack_require__(/*! ../modules/es.typed-array.fill */ \"./node_modules/core-js/modules/es.typed-array.fill.js\");\n__webpack_require__(/*! ../modules/es.typed-array.filter */ \"./node_modules/core-js/modules/es.typed-array.filter.js\");\n__webpack_require__(/*! ../modules/es.typed-array.find */ \"./node_modules/core-js/modules/es.typed-array.find.js\");\n__webpack_require__(/*! ../modules/es.typed-array.find-index */ \"./node_modules/core-js/modules/es.typed-array.find-index.js\");\n__webpack_require__(/*! ../modules/es.typed-array.for-each */ \"./node_modules/core-js/modules/es.typed-array.for-each.js\");\n__webpack_require__(/*! ../modules/es.typed-array.includes */ \"./node_modules/core-js/modules/es.typed-array.includes.js\");\n__webpack_require__(/*! ../modules/es.typed-array.index-of */ \"./node_modules/core-js/modules/es.typed-array.index-of.js\");\n__webpack_require__(/*! ../modules/es.typed-array.iterator */ \"./node_modules/core-js/modules/es.typed-array.iterator.js\");\n__webpack_require__(/*! ../modules/es.typed-array.join */ \"./node_modules/core-js/modules/es.typed-array.join.js\");\n__webpack_require__(/*! ../modules/es.typed-array.last-index-of */ \"./node_modules/core-js/modules/es.typed-array.last-index-of.js\");\n__webpack_require__(/*! ../modules/es.typed-array.map */ \"./node_modules/core-js/modules/es.typed-array.map.js\");\n__webpack_require__(/*! ../modules/es.typed-array.reduce */ \"./node_modules/core-js/modules/es.typed-array.reduce.js\");\n__webpack_require__(/*! ../modules/es.typed-array.reduce-right */ \"./node_modules/core-js/modules/es.typed-array.reduce-right.js\");\n__webpack_require__(/*! ../modules/es.typed-array.reverse */ \"./node_modules/core-js/modules/es.typed-array.reverse.js\");\n__webpack_require__(/*! ../modules/es.typed-array.set */ \"./node_modules/core-js/modules/es.typed-array.set.js\");\n__webpack_require__(/*! ../modules/es.typed-array.slice */ \"./node_modules/core-js/modules/es.typed-array.slice.js\");\n__webpack_require__(/*! ../modules/es.typed-array.some */ \"./node_modules/core-js/modules/es.typed-array.some.js\");\n__webpack_require__(/*! ../modules/es.typed-array.sort */ \"./node_modules/core-js/modules/es.typed-array.sort.js\");\n__webpack_require__(/*! ../modules/es.typed-array.subarray */ \"./node_modules/core-js/modules/es.typed-array.subarray.js\");\n__webpack_require__(/*! ../modules/es.typed-array.to-locale-string */ \"./node_modules/core-js/modules/es.typed-array.to-locale-string.js\");\n__webpack_require__(/*! ../modules/es.typed-array.to-string */ \"./node_modules/core-js/modules/es.typed-array.to-string.js\");\n__webpack_require__(/*! ../modules/es.reflect.apply */ \"./node_modules/core-js/modules/es.reflect.apply.js\");\n__webpack_require__(/*! ../modules/es.reflect.construct */ \"./node_modules/core-js/modules/es.reflect.construct.js\");\n__webpack_require__(/*! ../modules/es.reflect.define-property */ \"./node_modules/core-js/modules/es.reflect.define-property.js\");\n__webpack_require__(/*! ../modules/es.reflect.delete-property */ \"./node_modules/core-js/modules/es.reflect.delete-property.js\");\n__webpack_require__(/*! ../modules/es.reflect.get */ \"./node_modules/core-js/modules/es.reflect.get.js\");\n__webpack_require__(/*! ../modules/es.reflect.get-own-property-descriptor */ \"./node_modules/core-js/modules/es.reflect.get-own-property-descriptor.js\");\n__webpack_require__(/*! ../modules/es.reflect.get-prototype-of */ \"./node_modules/core-js/modules/es.reflect.get-prototype-of.js\");\n__webpack_require__(/*! ../modules/es.reflect.has */ \"./node_modules/core-js/modules/es.reflect.has.js\");\n__webpack_require__(/*! ../modules/es.reflect.is-extensible */ \"./node_modules/core-js/modules/es.reflect.is-extensible.js\");\n__webpack_require__(/*! ../modules/es.reflect.own-keys */ \"./node_modules/core-js/modules/es.reflect.own-keys.js\");\n__webpack_require__(/*! ../modules/es.reflect.prevent-extensions */ \"./node_modules/core-js/modules/es.reflect.prevent-extensions.js\");\n__webpack_require__(/*! ../modules/es.reflect.set */ \"./node_modules/core-js/modules/es.reflect.set.js\");\n__webpack_require__(/*! ../modules/es.reflect.set-prototype-of */ \"./node_modules/core-js/modules/es.reflect.set-prototype-of.js\");\n\nmodule.exports = __webpack_require__(/*! ../internals/path */ \"./node_modules/core-js/internals/path.js\");\n\n\n//# sourceURL=webpack:///./node_modules/core-js/es/index.js?");

/***/ }),

/***/ "./node_modules/core-js/internals/a-function.js":
/*!******************************************************!*\
  !*** ./node_modules/core-js/internals/a-function.js ***!
  \******************************************************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("module.exports = function (it) {\n  if (typeof it != 'function') {\n    throw TypeError(String(it) + ' is not a function');\n  } return it;\n};\n\n\n//# sourceURL=webpack:///./node_modules/core-js/internals/a-function.js?");

/***/ }),

/***/ "./node_modules/core-js/internals/add-to-unscopables.js":
/*!**************************************************************!*\
  !*** ./node_modules/core-js/internals/add-to-unscopables.js ***!
  \**************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

eval("var UNSCOPABLES = __webpack_require__(/*! ../internals/well-known-symbol */ \"./node_modules/core-js/internals/well-known-symbol.js\")('unscopables');\nvar create = __webpack_require__(/*! ../internals/object-create */ \"./node_modules/core-js/internals/object-create.js\");\nvar hide = __webpack_require__(/*! ../internals/hide */ \"./node_modules/core-js/internals/hide.js\");\nvar ArrayPrototype = Array.prototype;\n\n// Array.prototype[@@unscopables]\n// https://tc39.github.io/ecma262/#sec-array.prototype-@@unscopables\nif (ArrayPrototype[UNSCOPABLES] == undefined) {\n  hide(ArrayPrototype, UNSCOPABLES, create(null));\n}\n\n// add a key to Array.prototype[@@unscopables]\nmodule.exports = function (key) {\n  ArrayPrototype[UNSCOPABLES][key] = true;\n};\n\n\n//# sourceURL=webpack:///./node_modules/core-js/internals/add-to-unscopables.js?");

/***/ }),

/***/ "./node_modules/core-js/internals/advance-string-index.js":
/*!****************************************************************!*\
  !*** ./node_modules/core-js/internals/advance-string-index.js ***!
  \****************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
eval("\nvar codePointAt = __webpack_require__(/*! ../internals/string-at */ \"./node_modules/core-js/internals/string-at.js\");\n\n// `AdvanceStringIndex` abstract operation\n// https://tc39.github.io/ecma262/#sec-advancestringindex\nmodule.exports = function (S, index, unicode) {\n  return index + (unicode ? codePointAt(S, index, true).length : 1);\n};\n\n\n//# sourceURL=webpack:///./node_modules/core-js/internals/advance-string-index.js?");

/***/ }),

// ETC ETC ETC 
 });

I was expecting dist/main.js to only contain the contents of src/index.js with a tiny amount of webpack boostrapping code.

Have I incorrectly configured babel, or am I misunderstanding how babel is supposed to work in this scenario?

like image 394
kimsagro Avatar asked May 08 '19 00:05

kimsagro


People also ask

Does Babel use core-js?

If you are using @babel/polyfill , it already includes core-js : importing it twice will throw an error. Multiple imports or requires of those packages might cause global collisions and other issues that are hard to trace. We recommend creating a single entry file that only contains the import statements.

Is Babel deprecated?

This package has been deprecated in favor of separate inclusion of required parts of core-js and regenerator-runtime . See our website @babel/polyfill for more information. See our website @babel/polyfill for more information or the issues associated with this package.

Why is Babel polyfill?

Babel Polyfill adds support to the web browsers for features, which are not available. Babel compiles the code from recent ecma version to the one, which we want. It changes the syntax as per the preset, but cannot do anything for the objects or methods used.

Why do we use Babel?

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you: Transform syntax.


1 Answers

Array.prototype.forEach was not polyfilled because you are targeting Chrome 74, which already support forEach() natively, see:

https://caniuse.com/#search=foreach

That is the feature of @babel/preset-env. It will only add polyfills for the missing items in your targeted environment (in this case Chrome 74).

Your Webpack output bundle dist/main.js is bloated, that is because you are importing 'core-js/stable' in your Webpack entry src/index.js. This is unnecessary; [email protected] will decide what to import from core-js@3 automatically.

By importing core-js/stable into your source, you are defeating Babel@7 new feature:

useBuiltIns: 'usage'

This feature will analyse you code and decide what to polyfill intelligently base on your usage.

See: How do I install the babel-polyfill library?

like image 119
apollo Avatar answered Sep 25 '22 05:09

apollo