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-devnpm 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.jsasync 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 81chrome 80chrome 79chrome 78chrome 77chrome 76chrome 75chrome 74chrome 73chrome 72chrome 71chrome 70chrome 69chrome 68chrome 67chrome 66chrome 65chrome 64chrome 63chrome 62ie 11ie 10ie 9ie 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（一）