@babel/preset-env

安装

npm install --save-dev @babel/preset-env

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "modules": false,
        "corejs": 2
      }
    ],
    "@babel/preset-react"
  ],
  "comments": false,
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime"
  ]
}

.browserslistrc

# Browsers that we support

> 0.25%
not dead

配置参数

1. modules，"amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false，默认值是 auto。
   用来转换 ES6 的模块语法。如果使用 false，将不会对文件的模块语法进行转化。
   如果要使用 webpack 中的一些新特性，比如 tree shaking 和 sideEffects，就需要设置为 false，对 ES6 的模块文件不做转化，因为这些特性只对 ES6 的模块有效。
2. useBuiltIns，"usage" | "entry" | false, 默认值是 false。

• false：需要在 js 代码第一行主动 import ‘@babel/polyfill’，会将@babel/polyfill 整个包全部导入。（不推荐，能覆盖到所有 API 的转译，但体积最大）
• entry: 需要在 js 代码第一行主动 import ‘@babel/polyfill’，会将 browserslist 环境不支持的所有垫片都导入。（能够覆盖到‘hello‘.includes(‘h‘)这种句法，足够安全且代码体积不是特别大）
• usage: 项目里不用主动 import，会自动将代码里已使用到的、且 browserslist 环境不支持的垫片导入。（但是检测不到‘hello‘.includes(‘h‘)这种句法，对这类原型链上的句法问题不会做转译，书写代码需注意）

3. targets: 用来配置需要支持的的环境，不仅支持浏览器，还支持 node。如果没有配置 targets 选项，就会读取项目中的 browserslist 配置项。
4. loose: 默认值是 false，如果 preset-env 中包含的 plugin 支持 loose 的设置，那么可以通过这个字段来做统一的设置。