@ babel/preset-env 's useBuiltIns= "usage" doesn't seem to work in babel-loader.

problem description

as described in babel for useBuilitIns , it allows @ babel/preset-env to intelligently add polyfill of built-in types that are only used, that is, an on-demand reference to polyfill.

/ / .babelrc file

{
  "presets" : [
    ["@babel/preset-env",{
      "targets": {
        "browsers": [
          "last 2 versions",
          "not ie <= 9"
        ]
      },
      "modules": false,
      "debug": false,
      "useBuiltIns": "usage"
    }]
  ]
}

if I compile with babel cli alone at this time, there will be no problem

babel src -d output

View the compiled file is indeed introduced on demand:

clipboard.png

clipboard.png

babel-loaderpolyfill
String.padStart Promisepolyfill
polyfill

node: V8.10.0

clipboard.png

/ / webapck.config.js

module.exports = {
  mode: "development",
  
  entry: resolve("./src/index.js"),
  output: {
    path: resolve("./dist"),
    filename: "useButiltIn.js"
  },
  module: {
    rules: [
      {
        test: /\.(e|j)s&/,
        exclude: /(node_modules|bower_components)/,
        use: "babel-loader"
      }
    ]
  },
}

expected results

webpack can also introduce built-in types of polyfill that are packaged only as needed as babel cli . Which is the gasket of String.padStart and Promise above.

Test

github

Thank you


the matching condition is written incorrectly, so that babel does not take effect at all

test: /\.(e|j)s&/,
Change

to

test: /\.(e|j)s$/,
Menu