执行 Babel 生成的代码

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

babel-polyfill

Babel 几乎可以编译所有时新的 JavaScript 语法，但对于 APIs 来说却并非如此。

比方说，下列含有箭头函数的需要编译的代码：

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

最终会变成这样：

  1. function addAll() {
  2.   return Array.from(arguments).reduce(function(a, b) {
  3.     return a + b;
  4.   });
  5. }

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

  1. 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 安装它：

  1. $ npm install --save babel-polyfill

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

  1. import "babel-polyfill";

babel-runtime

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

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

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

  1. $ npm install --save-dev babel-plugin-transform-runtime
  2. $ npm install --save babel-runtime

然后更新 .babelrc：

  1.   {
  2.     "plugins": [
  3. +     "transform-runtime",
  4.       "transform-es2015-classes"
  5.     ]
  6.   }

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

  1. class Foo {
  2.   method() {}
  3. }

编译成：

  1. import _classCallCheck from "babel-runtime/helpers/classCallCheck";
  2. import _createClass from "babel-runtime/helpers/createClass";
  3.  
  4. let Foo = function () {
  5.   function Foo() {
  6.     _classCallCheck(this, Foo);
  7.   }
  8.  
  9.   _createClass(Foo, [{
  10.     key: "method",
  11.     value: function method() {}
  12.   }]);
  13.  
  14.   return Foo;
  15. }();

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