关于Babel配置项的这点事

摘要：IE虽然没落了，Babel还是要用的…

• 原文： 关于Babel配置项的这点事
• 作者： tonyc726

Fundebug经授权转载，版权归原作者所有。

Babel 作为一个JavaScript的语法编译器，可以将 ES6/7/8 代码转为 ES5 代码，从而在现有环境执行。

但是初次配置 .babelrc 的时候，各种 presets 、 plugins 看的眼花缭乱，不知道如何下手，下面就自己学习Babel时遇到的问题做一下总结：

如果你是初次接触babel，推荐阅读阮一峰的《 Babel 入门教程 》

Plugin、Preset、Stage-X的关系

按照Babel官网的 介绍 ，其实 Preset 和 Stage-X 都是归属到 Plugin 里面的，只不过所覆盖的范围不同而已。

举个例子，如果需要转换ES2015(ES6)的语法，那么你可以在 .babelrc 的 plugins 中按需引入 check-es2015-constants 、 es2015-arrow-functions 、 es2015-block-scoped-functions 等等几十个不同作用的plugin：

// .babelrc
{
  "plugins": [
    "check-es2015-constants",
    "es2015-arrow-functions",
    "es2015-block-scoped-functions",
    // ...
  ]
}

但是Babel团队为了方便，将 同属ES2015的几十个Transform Plugins 集合到 babel-preset-es2015 一个Preset中，这样你只需要在 .babelrc 的 presets 加入 es2015 一个配置就可以完成全部ES2015语法的支持了：

// .babelrc
{
  "presets": [
    "es2015"
  ]
}

另外，不论是Plugin还是Preset，有不少都有单独属于自己的配置项，具体如何操作的可以看一下 官网的说明 。

上面介绍了Plugin与Preset，那么Stage-X就很好理解了， stage-0 、 stage-1 、 stage-2 、 stage-3 、

就好了。

PS: babel-preset-stage-4 已经整合入Presets不单独发布了。

以上就是一些基础概念，目前，官方推荐使用 babel-preset-env ，它可以根据你的配置结合 compat-table 来帮你自动引入你需要的plugins，它有很多 配置项 ，下面介绍几个常用的：

• targets ： { [string]: number | string } ，默认 {} ；

需要支持的环境，可选例如： chrome , edge , firefox , safari , ie , ios , node ，甚至可以指定版本，如 node: "6.10" 或者 node: "current" 代表使用当前的版本；

• targets.node ： number | string | "current" | true ；

指定 node 的版本，例如： 6.10 ；

• targets.browsers ： Array<string> | string ；

指定需要兼容的浏览器清单，具体参考 browserslist ，例如： ["last 2 versions", "safari >= 7"] ；

例如需要配置兼容 ["last 2 versions", "safari >= 7"] 的 babel-preset-env ：

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

此外，不同的plugins和presets或许有些功能是重复的，有些存在依赖关系，在配置的时候还有前后顺序的不同，那么Babel在运行的时候是怎么处理的呢？总结一下，规律大概有以下几点：

1. plugins优先于presets进行编译；
2. plugins按照数组的index增序(从数组第一个到最后一个)进行编译；
3. presets按照数组的index倒序(从数组最后一个到第一个)进行编译，因为作者认为大部分会把presets写成 ["es2015", "stage-0"] ，具体细节可以看 这个 。

摘自《 如何写好.babelrc？Babel的presets和plugins配置解析 》

babel-polyfill与babel-runtime的选择

Babel默认只转换新的JavaScript语法，而不转换新的API，比如 Iterator 、 Generator 、 Set 、 Maps 、 Promise 等等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign ）都不会转码，具体的可以参考 babel-plugin-transform-runtime 模块的 definitions.js 文件。

babel-polyfill 与 babel-runtime 就是为了解决这种全局对象或者全局对象方法不足的问题，而诞生的2种解决方式。

当然，你还可以用 promise-polyfill 此类Polyfill解决全局对象的问题；

或者用 lodash 此类Utils解决 Object.assign 这种方法扩展的问题。

先说说 babel-polyfill ，它的做法比较暴力，就是将全局对象通通污染一遍，这样做的坏处有几点：

1. 可能会增加很多根本没有用到的polyfill；
2. 可能会污染子模块的局部作用域，严重的或许会导致冲突；

但是，这样做也有好处，如果你的运行环境比较low，比如说Android一些老机子，而你有需要大量使用 Promise 、 Object.assign 、 Array.find 之类的全局对象或者其所属方法，那么使用 babel-polyfill ，绝对是一劳永逸。

接着，再来说说 babel-runtime ，相对而言，它的处理方式比较温柔，套用步步高的广告词就是哪里需要加哪里，比如说你需要 Promise ，你只需要 import Promise from 'babel-runtime/core-js/promise' 即可，这样不仅避免污染全局对象，而且可以减少不必要的代码。

不过，如果N个文件都需要 Promise ，难道得一个个文件的加 import Promise from 'babel-runtime/core-js/promise' 么，显然不是，Babel已经为这样情况考虑过了，只需要使用 babel-plugin-transform-runtime 就可以轻松的帮你省去手动 import 的痛苦，而且，它还做了公用方法的抽离，哪怕你有100个模块使用了 Promise ，但是promise的polyfill仅仅存在1份，所有要的地方都是引用一地方，具体的配置参考如下：

// .babelrc
{
  "presets": [
    "env",
    "stage-0"
  ],
  "plugins": [
    "transform-runtime"
  ],
  "comments": false
}

写在最后，我在 Github上开了一个项目 ，做了几个测试，有兴趣的可以一起来试试看。

babel与webpack

关于 babel 与 webpack 结合使用的教程网上已经有很多了，有不少却还在用 v1.* 的版本（不推荐），从而在过渡到 v2.* 或者 v3.* (推荐)的版本时，碰到一个关于 babel 的配置问题，示例如下：

// .babelrc - webpack v1.*
{
  "presets": [
    "env",
    "stage-0"
  ]
}

// .babelrc - webpack v2.* - v3.*
{
  "presets": [
    ["env", {
        "modules": false
    }],
    "stage-0"
  ]
}

很明显，一眼就能看出相对于 v1.* 的版本， v2.* 或者 v3.* 版本多了 "modules": false 这项配置，如果仔细看 官网的迁移指南 ，你就能明白了，以前你可能需要用 babel 来将 ES6 的模块语法转换为 AMD 、 CommonJS 、 UMD 之类的模块化标准语法，但是现在webpack已经把这个事情做了，所以就不需要 babel 来做了，但是 babel 配置项中的 modules 默认值 是 commonjs ，所以你需要将 modules 设置为 false 才行，不然就冲突了。

参考资料

• Babel 入门教程
• 如何写好.babelrc？Babel的presets和plugins配置解析
• babel的polyfill和runtime的区别
• Babel 全家桶
• transform-runtime 会自动应用 polyfill，即便没有使用 babel-polyfill
• 如何区分Babel中的stage-0,stage-1,stage-2以及stage-3（一）

本文先发布于我的个人博客《 Babel笔记 》，后续如有更新，可以查看原文。