babel-preset-env 一个就够了


Babel 的官网上在2017年9月宣布 ES2015 / ES2016/ ES2017 等等 ES20xx 时代的 presets 通通被废弃(deprecated),取而代之的是 babel-preset-env,并且承诺它将成为“未来不会过时的(future-proof)”解决方案。

babel-preset-env 是一个新的 preset,可以根据配置的目标运行环境(environment)自动启用需要的 babel 插件。

目前我们写 javascript 代码时,需要使用 N 个 preset,比如:babel-preset-es2015、babel-preset-es2016。es2015 可以把 ES6 代码编译为 ES5,es2016 可以把 ES2016 代码编译为 ES6。babel-preset-latest 可以编译 stage 4 进度的 ECMAScript 代码。

问题是我们几乎每个项目中都使用了非常多的 preset,包括不必要的。例如很多浏览器支持 ES6 的 generator,如果我们使用 babel-preset-es2015 的话,generator 函数就会被编译成 ES5 代码。

babel-preset-env 的工作方式类似 babel-preset-latest,唯一不同的就是 babel-preset-env 会根据配置的 env 只编译那些还不支持的特性。

使用这个插件,你讲再也不需要使用 es20xx presets 了。


首先卸载原来的 preset,然后安装 babel-preset-env:

npm uninstall --save-dev babel-preset-es2015
npm install --save-dev babel-preset-env@next
接下来将你的 .babelrc 文件中“es2015”修改“env”:

{
  "presets": [ "env" ],
  ...
}


更进一步
在 babel-preset-env 的官方说明中提到这是一款可以“自动”决定加载哪些插件和 polyfill 的 preset,既然是叫“env”,那么一定是可以由开发者决定编译目标处于什么样的运行环境。

targets 选项
通过 targets 指定需要兼容的浏览器类型和版本(采用 ai/browserslist 查询语法 ):

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}


换句话说,你可以通过指定更高的浏览器版本来减少插件和 polyfill 的代码量,并且直接使用原生 ES6 的新特性,特别适合 Electron 及移动端 App 或者那些已指定了浏览器的内网应用程序。例如,将浏览器设为 Chrome 较高的版本,Promise、Map、Set 等内建类均不会被 polyfill,而同时 class 等新语法也不会被 Babel 转译,转而使用 V8 自带的 ES6 Class。

指定需要兼容的浏览器清单: https://github.com/browserslist/browserslist

如果你是用来开发 Node.js 应用,也同样可以指定 Node 的版本:

{
  "presets": [
    ["env", {
      "targets": {
        "node": "6.10"
      }
    }]
  ]
}


为了方便,你也可以直接写成 "node": "current",将自动采用你当前用来运行 Babel 的 Node.js 版本。
同时也可以在 targets 中指定 browsers 选项。
目前 targets 中支持了几乎所有主流运行时环境,其中就包括了 IE、Chrome、Firefox、Opera、Edge、Safari、iOS Safari、Android、Node 和 Electron 等。

modules 选项
该选项与过去一致,用来指定模块化方式,支持 AMD、UMD、SystemJS、CommonJS 等。当然在 Webpack 2/3 的时代,推荐将 modules 设置为 false,即交由 Webpack 来处理模块化,通过其 TreeShaking 特性将有效减少打包出来的 JS 文件大小:

{
  "presets": [
    ["env", {
      modules: false,
      ...
    }]
  ]
}


babel-preset-env 目前正在不断积极更新中,更多的 babel-preset-env 选项请参见 babel/babel-preset-env。

 

 

参考:

https://zhuanlan.zhihu.com/p/29506685

https://segmentfault.com/p/1210000008466178

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
随机推荐
MySQL 使用 DATE_FORMAT() 和 FROM_UNIXTIME() 格式化时间
WordPress 增强编辑器功能
Nginx 的 location 设置
Nginx 通过日志统计访问数据
WordPress关闭自动草稿
Linux netstat 命令
TypeScript 和 Koa 实践
Rollup 教程