@babel/ PRESET -env + @babel/polyfill can fully realize translation of ES base syntax + translation of new API, which is the first way to configure Babel transcoding.

@babel/preset-env

Basic syntax conversion, need to add @babel/preset-env.

  1. Installing dependency packages

    yarn add @babel/preset-env -D
Copy the code

  2. Add the configuration

    {
  "presets": [["@babel/preset-env",
       {
         "modules": false.// Do not transform ES6 module files in order to use Tree shaking, sideEffects, etc}]],"plugins": []}Copy the code

By default, Babel only converts new JavaScript syntax, not new apis, such as Iterator, Generator, Set, Maps, Proxy, Reflect, Symbol, Promise, etc. And some methods defined on global objects (such as Object.assign) do not transcode. To translate the new API, you need to use the polyfill solution. Use @babel/ Polyfill or @babel/ plugin-transform-Runtime, or choose one of the two.

The introduction of@babel/polyfill

@babel/polyfill is essentially an alias for the core-JS library. With the update to core-js@3, @babel/polyfill cannot transition from 2 to 3, so @babel/polyfill has been dropped. Please check corejs 3 for updates.

  1. Install dependency packages:

    yarn add @babel/polyfill  -D
Copy the code

  2. @babel/polyfill does not write the configuration, but decides how to be called based on the useBuiltIns parameter.

    {
  "presets": [["@babel/preset-env",
      {
        "useBuiltIns": "entry"."modules": false."corejs": 2.// The new version of @babel/polyfill contains core-js@2 and core-js@3 versions, so you need to declare the version, otherwise webpack will run warning, here we temporarily use core-js@2 version (@core-js@3 will be attached at the end of how to use)}}]]Copy the code

  3. Configuration parameters

    1. modules."amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false, the default value is auto.

      Used to convert ES6 module syntax. If false is used, the module syntax of the file will not be transformed.

      If you want to use some of the new webPack features, such as Tree Shaking and sideEffects, you need to set it to false and do no transformation for ES6 module files, since these features only work for ES6 modules.
    2. useBuiltIns."usage" | "entry" | falseThe default value is false.
    • falseImport ‘@babel/polyfill’ on the first line of the js code. This will import the entire @babel/polyfill package.

      (Not recommended, can cover all API translation, but maximum volume)
    • entryYou need to import ‘@babel/polyfill’ at the first line of your js code, which will import any shim that the Browserslist environment does not support.

      (can overwrite ‘hello’. Includes (‘ h ‘) syntax, safe enough and not too big)
    • usage: There is no active import in the project. Shims that are already used in the code and are not supported by the Browserslist environment are automatically imported.

      (the syntax ‘hello’. Includes (‘ h ‘) is not detected and does not translate the syntax problems on the prototype chain.Be careful when writing code)
    1. targetsIs used to configure the environment to support, not only browsers, but also Node. If the Targets option is not configured, the Browserslist configuration item in the project is read.
    2. loose, the default is false. If the plugin included in preset-env supports LOOSE’s setting, this field can be used for a uniform setting.