一文带你了解 babel-preset-env

Question

相信很多人都和我一样，刚接触babel的时候都是使用 babel-preset-es2015 这个预设套餐的，但是显然目前而言 babel-preset-env 会是一个更好的选择，babel-preset-env 可以根据配置的目标浏览器或者运行环境来自动将ES2015+的代码转换为es5。

吸引人的地方在于我们可以通过 [.browserslistrc](https://github.com/browserslist/browserslist) 文件来指定特定的目标浏览器。当然也可以通过targets选项的browsers选项指定。不过如果你的目标浏览器支持 es modules 特性，browsers 选项则会失效，如下：

{
    "presets": [
        ["@babel/preset-env"
            "targets": {
                "esmodules": true
            }
        ]
    ]
}

同样也可以指定Node.js的版本：

{
    "presets": [
        ["@babel/preset-env"
            "targets": {
                "node": "6.10"
            }
        ]
    ]
}

如果node的选项值为 current 则说明是指定运行时的node.js版本。

{
    "presets": [
        ["@babel/preset-env"
            "targets": {
                "node": "current"
            }
        ]
    ]
}

我们需要知道的是制定个targets的browsers时使用的是 browserslist ，我们可以在 .babelrc 文件、package.json文件、browserslist中指定浏览器版本选项，优先级规则是 .babelrc文件定义了则会忽略 browserslist、.babelrc 没有定义则会搜索 browserslist 和 package.json 两者应该只定义一个，否则会报错。

babel-preset-env 的主要参数选项有：

• targets
• targets.node
• targets.browsers
• spec : 启用更符合规范的转换，但速度会更慢，默认为 false
• loose：是否使用 loose mode，默认为 false
• modules：将 ES6 module 转换为其他模块规范，可选 "adm" | "umd" | "systemjs" | "commonjs" | "cjs" | false，默认为 false
• debug：启用debug，默认 false
• include：一个包含使用的 plugins 的数组
• exclude：一个包含不使用的 plugins 的数组
• useBuiltIns：为 polyfills 应用 @babel/preset-env ，可选 "usage" | "entry" | false，默认为 false

相关链接

• README of babel-preset-env