Babel从入门到进阶（二）

Vue教程 admin 暂无评论

配置 Babel

你或许已经注意到了，目前为止通过运行 Babel 自己我们并没能“翻译”代码，而仅仅是把代码从一处拷贝到了另一处。

这是因为我们还没告诉 Babel 要做什么。

由于 Babel 是一个可以用各种花样去使用的通用编译器，因此默认情况下它反而什么都不做。你必须明确地告诉 Babel 应该要做什么。

你可以通过安装插件（plugins）或预设（presets，也就是一组插件）来指示 Babel 去做什么事情。（所谓的 presets 其实就是一些同类plugin打包的结果，方便进行添加）

.babelrc

在我们告诉 Babel 该做什么之前，我们需要创建一个配置文件。你需要做的就是在项目的根路径下创建 .babelrc 文件。然后输入以下内容作为开始：

{  
    "presets": [],  "plugins": []
}

这个文件就是用来让 Babel 做你要它做的事情的配置文件。

注意：尽管你也可以用其他方式给 Babel 传递选项，但 .babelrc 文件是约定也是最好的方式。

babel-preset-es2015

我们先从让 Babel 把 ES2015（最新版本的 JavaScript 标准，也叫做 ES6）编译成 ES5（现今在大多数 JavaScript 环境下可用的版本）开始吧。

我们需要安装 "es2015" Babel 预设：

$ npm install --save-dev babel-preset-es2015

我们修改 .babelrc 来包含这个预设。

  {
    "presets": [
        +     "es2015"
    ],
    "plugins": []
  }

babel-preset-react

设置 React 一样容易。只需要安装这个预设：

$ npm install --save-dev babel-preset-react

然后在 .babelrc 文件里补充：

  {
    "presets": [
      "es2015",+     "react"
    ],
    "plugins": []
  }

babel-preset-stage-x

JavaScript 还有一些提案，正在积极通过 TC39（ECMAScript 标准背后的技术委员会）的流程成为标准的一部分。

这个流程分为 5（0－4）个阶段。 随着提案得到越多的关注就越有可能被标准采纳，于是他们就继续通过各个阶段，最终在阶段 4 被标准正式采纳。

以下是4 个不同阶段的（打包的）预设：

  • babel-preset-stage-0

  • babel-preset-stage-1

  • babel-preset-stage-2

  • babel-preset-stage-3

注意 stage-4 预设是不存在的因为它就是上面的 es2015 预设。

以上每种预设都依赖于紧随的后期阶段预设。例如，babel-preset-stage-1 依赖 babel-preset-stage-2，后者又依赖babel-preset-stage-3。.

Stage 0：

  • Function Bind Syntax：函数的绑定运算符

  • String.prototype.at：字符串的静态方法at

Stage 1：

  • Class and Property Decorators：Class的修饰器

  • Class Property Declarations：Class的属性声明

  • Additional export-from Statements：export的写法改进

  • String.prototype.{trimLeft,trimRight}：字符串删除头尾空格的方法

Stage 2：

  • Rest/Spread Properties：对象的Rest参数和扩展运算符

Stage 3

  • SIMD API：“单指令，多数据”命令集

  • Async Functions：async函数

  • Object.values/Object.entries：Object的静态方法values()和entries()

  • String padding：字符串长度补全

  • Trailing commas in function parameter lists and calls：函数参数的尾逗号

  • Object.getOwnPropertyDescriptors：Object的静态方法getOwnPropertyDescriptors

Stage 4：

  • Array.prototype.includes：数组实例的includes方法

  • Exponentiation Operator：指数运算符

使用的时候只需要安装你想要的阶段就可以了：

$ npm install --save-dev babel-preset-stage-2

然后添加进你的 .babelrc 配置文件。

  {
    "presets": [
      "es2015",
      "react",
      +     "stage-2"
    ],
    "plugins": []
  }

执行 Babel 生成的代码

即便你已经用 Babel 编译了你的代码，但这还不算完。

babel-polyfill

Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。Babel默认不转码的API非常多，详细清单可以查看definitions.js文件。

举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。

比方说，我们需要编译以下代码：

function addAll() {  
    return Array.from(arguments).reduce((a, b) => a + b);
}

最终会变成这样：

function addAll() {  
    return Array.from(arguments).reduce(function(a, b) {    return a + b;
  });
}

然而，它依然无法随处可用因为不是所有的 JavaScript 环境都支持 Array.from。

Uncaught TypeError: Array.from is not a function

为了解决这个问题，我们使用一种叫做 Polyfill（代码填充，也可译作兼容性补丁） 的技术。 简单地说，polyfill 即是在当前运行环境中用来复制（意指模拟性的复制，而不是拷贝）尚不存在的原生 api 的代码。 能让你提前使用还不可用的 APIs，Array.from 就是一个例子。

Babel 用了优秀的 core-js 用作 polyfill，并且还有定制化的 regenerator 来让 generators（生成器）和 async functions（异步函数）正常工作。

要使用 Babel polyfill，首先用 npm 安装它：

$ npm install --save babel-polyfill

然后只需要在文件顶部导入 polyfill 就可以了：

import "babel-polyfill";

babel-runtime

为了实现 ECMAScript 规范的细节，Babel 会使用“助手”方法来保持生成代码的整洁。

由于这些助手方法可能会特别长并且会被添加到每一个文件的顶部，因此你可以把它们统一移动到一个单一的“运行时（runtime）”中去。

通过安装 babel-plugin-transform-runtime 和 babel-runtime 来开始。

$ npm install --save-dev babel-plugin-transform-runtime
$ npm install --save babel-runtime

然后更新 .babelrc：

  {
    "plugins": [
        +     "transform-runtime",
      "transform-es2015-classes"
    ]
  }

现在，Babel 会把这样的代码：

class Foo {
  method() {}
}

编译成：

import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";
let Foo = function () {  
    function Foo() {
    _classCallCheck(this, Foo);
  }

  _createClass(Foo, [{
    key: "method",
    value: function method() {}
  }]);  return Foo;
}();

这样就不需要把 _classCallCheck 和 _createClass 这两个助手方法放进每一个需要的文件里去了。


转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » Babel从入门到进阶（二）

喜欢 ()or分享