Which babel preset to connect instead of @babel/stage-0

Question

Which babel preset to connect instead of @babel/stage-0

@babel/stage-x removed in Babel 7+ Which preset to connect to .babelrc that would work import/export from es6 I use webpack 4

.babelrc
{
    "presets": [
        ["@babel/preset-env", {
            "targets": {
                "node": "current",
            },
            "useBuiltIns": 'entry'
        }],
        "@babel/react"
    ]
}

Mistake

0

javascript webpack babel

Author: dev_jun, 2018-10-03

Source

1 answers

score 2 · Accepted Answer

You can use @babel/preset-env with the convenient option "useBuiltIns": "usage" and not worry about polyfiles, babel will do everything for you.

With this option, babel adds polyfile imports based on usage in the converted code. For example, if you use Object.assign in your code, the corresponding polyfill will be automatically imported if your target environment does not support it.

If you are creating a library or web component instead of an application, you will probably want to set the value useBuiltIns as false and allow the consumer application to be responsible for the polyfiles.

Note that usage detection does not apply to your dependencies (which are excluded by default cli-plugin-babel). If one of your dependencies needs policies, you have several options:

If the dependency sends an ES5 code and explicitly lists the required polyfiles: you can pre-enable the required policies using the polyfills option for this pre-dependency. settings.
If the dependency sends ES5 code, but uses ES6 + functions without explicitly specifying which polyfiles are needed: use "useBuiltIns": "entry", and then add import '@babel/polyfill' to your input file (main). This will import ALL polyfiles are based on your targets which browsers to support, so you will no longer need to worry about policies with dependencies, but will most likely increase your final package size with some unused ones polyfilov.

This will be the config:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage"
      }
    ]
  ]
}