安装
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
配置参数
modules,"amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false
,默认值是 auto。
用来转换 ES6 的模块语法。如果使用 false,将不会对文件的模块语法进行转化。
如果要使用 webpack 中的一些新特性,比如 tree shaking 和 sideEffects,就需要设置为 false,对 ES6 的模块文件不做转化,因为这些特性只对 ES6 的模块有效。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‘)这种句法,对这类原型链上的句法问题不会做转译,书写代码需注意)
targets
: 用来配置需要支持的的环境,不仅支持浏览器,还支持 node。如果没有配置 targets 选项,就会读取项目中的 browserslist 配置项。loose
: 默认值是 false,如果 preset-env 中包含的 plugin 支持 loose 的设置,那么可以通过这个字段来做统一的设置。