【构建工具】babel-preset-env与stage-x的使用指南

babel介绍

babel总共分为3个阶段: 解析、转换和生成

babel本身不具有任何转换功能， 如果没有plugin,那么经过babel的代码和输入的是相同的。

babel插件分为两种

• 语法插件：在解析的过程中，能使babel能够解析更多的语法
• 转译插件: 在转换的过程中将代码输出。比如将箭头函数转译成正常的函数

其中preset就是babel常用的转译插件

preset介绍

preset是一套规范， 里面包含了几十个转译插件。这是一组插件的集合

preset可以分为下面几种：

1. 按官方内容: env, react, flow, minify
2. stage-x：stage-0 至 stage-3代表了es标准支持的不同阶段。0阶段是最初级的阶段，可以理解为仅仅才开始讨论标准， 换句话说就是基本没有什么浏览器支持es新标准。3表示成熟阶段，意味着主流浏览器的新版本都支持大部分新标准，基础的es新标准特性不需要降级编译为es5，浏览器即可原生支持。

stage-3包括以下插件：

• transform-async-to-generator 支持async/await
• transform-exponentiation-operator 支持幂运算符语法糖

stage-2包括stage-3的所有插件，额外还包括以下插件：

• syntax-trailing-function-commas 支持尾逗号函数，额...很鸡肋
• transform-object-reset-spread 支持对象的解构赋值

stage-1包括stage2所有插件，额外还包括以下插件：

• transform-class-constructor-call 支持class的构造函数
• transform-class-properties 支持class的static属性
• transform-decorators 支持es7的装饰者模式即@符号引入的方法 (还在讨论中的特性？)
• transform-export-extensions 支持export方法

stage-0包括stage1所有插件，额外还包括以下插件：

• transform-do-expressions 支持在jsx中书写if/else
• transform-function-bind 支持::操作符来切换上下文，类似于es5的bind

babel-preset-env

历史版本babel-preset-latest（已被弃用）

最初，为了让开发者能够尽早用上新的JS特性，babel团队开发了babel-preset-latest。这个preset比较特殊，它是多个preset的集合(es2015+)，并且随着ECMA规范的更新更增加它的内容。

• 特点：包含了所有年度预设（babel-preset-es2015、babel-preset-es2016、babel-preset-es2017），无需用户单独指定某个预设。
• 缺点：部分转码多余，如果使用默认设置，babel会将所有ES6与ES6+的新特性转成复杂的es5的代码。但是大部分现在浏览器已经支持ES6的部分特性。

因为上述问题的存在，babel官方推出了babel-preset-env插件。它可以根据开发者的配置，按需加载插件。配置项大致包括：

• 需要支持的平台：比如node、浏览器等。
• 需要支持的平台的版本：比如支持node@6.1等。

默认配置的情况下，它跟babel-preset-latest是等同的，会加载从es2015开始的所有preset。

//默认设置
{
  "presets": ["env"]
}

入门实例

首先，安装依赖：

npm install babel-cli --save-dev
npm install babel-preset-env --save-dev

创建一个index.js文件：

let foo = () => 'foo';

配置文件 .babelrc 如下，当前为默认配置。

{
  "presets": [ "env" ]
}

对index.js文件执行babel转化命令：

// 方式一：
.\node_modules\.bin\babel index.js

// 方式二（npm5.2支持）：
npx babel index.js

转换结果如下：

'use strict';

var foo = function foo() {
  return 'foo';
};

针对node版本的配置

babel-preset-env 提供了更精细化的配置，以提升编译速度，同时减少代码冗余。
比如我们index.js的代码如下：

// index.js
async function foo () {}

采用 babel-preset-env，默认配置下,编译后的代码如下：

"use strict";

var foo = function () {
  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
          case "end":
            return _context.stop();
        }
      }
    }, _callee, this);
  }));

  return function foo() {
    return _ref.apply(this, arguments);
  };
}();

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

结果很长，无需关心。如果我们的代码是在node@8.9.3版本上运行，那上面的这些兼容代码就是冗余的，因为node@8.9.3已经支持了async/await。

修改下 .babelrc，加上配置参数"target"，它表示我们需要支持哪些平台+哪些版本。这里声明我们要支持的是node版本为8.9.3。

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

再次进行转码，结果如下:

"use strict";

async function foo() {}

针对浏览器版本的配置

babel-preset-env 同样提供了对浏览器版本的配置能力。
比如，我们需要支持 IE8+、chrome62+，那么可以这样配置：

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": [ "ie >= 8", "chrome >= 62" ]
      }      
    }]
  ]
}

看下前面声明的范围涵盖了哪些浏览器:

npx browserslist "ie >= 8, chrome >= 62"
chrome 81
chrome 80
chrome 79
chrome 78
chrome 77
chrome 76
chrome 75
chrome 74
chrome 73
chrome 72
chrome 71
chrome 70
chrome 69
chrome 68
chrome 67
chrome 66
chrome 65
chrome 64
chrome 63
chrome 62
ie 11
ie 10
ie 9
ie 8

当然上面的配置规则不是凭空想象，其它的具体配置规则可参考《 browserslist 库》

stage-x（实验阶段presets）

默认不会包含stage-x插件,需要手动配置支持

"presets": [
    // 带了配置项，自己变成数组
    [
        // 第一个元素依然是名字
        "env",
        // 第二个元素是对象，列出配置项
        {
          "modules": false //  将ES6模块语法转换为另一种模块类型,"amd" | "umd" | "systemjs" | "commonjs" | false
        }
    ],

    // 不带配置项，直接列出名字
    "stage-2"
]

根据需求安装不同版本的stage:

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

参考地址

• babel-preset-env
• babel-preset-env使用指南
• browserslist 库
• 如何区分Babel中的stage-0,stage-1,stage-2以及stage-3（一）