关于babel-preset-env:构建工具babelpresetenv与stagex的使用指南

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（一）