引入polyfill

本节配套代码是github仓库  https://github.com/jruit/babel-tutorial 的babel02例子

总体来说，Babel的主要工作有两部分：

• 语法转换
• 补齐API

上一节Babel快速入门我们讲的是其实是用Babel进行语法转换，把ES6的箭头函数语法转换成了ES5的函数定义语法。 箭头函数语法、async函数语法、class定义类语法和解构赋值等等都是ES6新增的语法。

那什么是补齐API？ 简单解释就是，通过 Polyfill 的方式在目标环境中添加缺失的特性 。

我们按照上一节的操作对var promise = Promise.resolve('ok')进行转换，会发现转换后的代码并没有改变，过程如下。

我们新建babel02文件夹，新建babel配置文件 babel.config.js ,内容如下

 module.exports = {
    presets: ["@babel/env"],
    plugins: []
  }

新建main.js文件，内容如下

  var fn = (num) => num + 2;
  var promise = Promise.resolve('ok')

然后执行下面的命令安装三个npm包

  // npm一次性安装多个包，包名之间用空格隔开
  npm install --save-dev @babel/cli @babel/core @babel/preset-env

然后执行命令

  npx babel main.js -o compiled.js

整个过程与上一节基本一样，只是main.js里的代码多了一行

var promise = Promise.resolve('ok')

此时文件夹下会生成新的compiled.js，代码如下：

"use strict";

var fn = function fn(num) {
  return num + 2;
};

var promise = Promise.resolve('ok');

我们观察转换后生成的compiled.js代码，发现Babel并没有对ES6的Promise进行转换 。

我们通过一个index.html文件引用转码后的 compiled.js ，在比较老的浏览器（ 例如火狐27 ）里打开HTML文件后后控制台报错：Promise is not defined。

为何 Babel没有对ES6的Promise进行转换 ？

因为Babel默认只转换新的JavaScript语法（syntax），而不转换新的 API。

新的API分类两类，一类是Promise、Map、Symbol、Proxy、Iterator等全局对象及其对象自身的方法，例如Object.assign，Promise.resolve；另一类是新的实例方法，例如数组实例方法[1, 4, -5, 10].find((item) => item < 0)

如果想让ES6新的API在低版本浏览器正常运行，我们就不能只做语法转换。

在前端web工程里，最常规的做法是使用polyfill，为当前环境提供一个垫片。所谓垫片，是指垫平不同浏览器之间差异的东西。polyfill提供了全局的ES6对象以及通过修改原型链Array.prototype等实现对实例的实现。

polyfill广义上讲是为环境提供不支持的特性的一类文件或库，狭义上讲是polyfill.js文件以及@babel/polyfill这个npm包。

我们可以直接在html文件引入polyfill.js文件来作为全局环境垫片， polyfill.js 有Babel官方的 polyfill.js，也有第三方的。我们引入一个Babel官方已经构建好的polyfill脚本。

简单起见，我们通过在html里引入polyfill.js的方式。

    <script src="https://cdn.bootcss.com/babel-polyfill/7.6.0/polyfill.js"></script>

我们在IE9打开验证，也可以用Firefox27等低版本的浏览器验证。这个时候发现可以正常运行了。

补齐API的方式除了通过引入 polyfill.js 文件 ，还有通过在构建工具入口文件（例如webapck），babel配置文件等方式进行。本节讲的通过在HTML里直接引入 polyfill.js 文件 这种方式进行在现代前端工程里逐渐淘汰，很少使用了。但这种方式对初学者理解 polyfill 是做什么的是简单直接的。后续章节我们会学习到其它补齐API的方式。

小结

本节讲了通过 polyfill.js 文件来补齐代码运行时环境所缺失的API。

通过上一节讲的语法转换和本节讲的补齐API，就可以使一个使用ES6编写项目完整运行了不支持ES6语言的环境上了。

注

1.可以在 https://ftp.mozilla.org/pub/firefox/releases/27.0.1/ 页面下载对应操作系统的火狐27，如果长期使用该版本注意设置成不要自动更新，windows的话，左上角Firefox-选项-高级-更新里设置。

2. 什么是API？初学编程的人看了百度百科这一类高大上的解释会很迷惑。我们举个简单例子来解释：JS里的数组有排序方法sort()，这个就是JS语言制定者给数组制定的API。引申一下，你使用了别人已经写好的对象、类、函数或方法，那就是使用了API。

    那ES6有哪些新的API呢？Promise对象，数组的Array.from()与Array.of()方法，数组实例的展平方法flat()，Object.assign()方法等等。只要是新的对象名、类名、函数名或方法名，就是ES6的新API。