babel-preset-env与stage-x的使用指南

babel介绍

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

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

babel插件分为两种

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

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

preset介绍

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

preset可以分为下面几种：

按官方内容: env, react, flow, minify
stage-x, 包含当年最新规范的草案，每年更新。每个stage是不一样的，可以分为以下几点:
- Stage 0 - 稻草人: 只是一个想法，经过 TC39 成员提出即可。
- Stage 1 - 提案: 初步尝试。
- Stage 2 - 初稿: 完成初步规范。
- Stage 3 - 候选: 完成规范和浏览器初步实现。
- Stage 4 - 完成: 将被添加到下一年度发布。

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、浏览器等。
需要支持的平台的版本：比如支持[email protected]等。

默认配置的情况下，它跟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"); }); }; }

结果很长，无需关心。如果我们的代码是在[email protected]版本上运行，那上面的这些兼容代码就是冗余的，因为[email protected]已经支持了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