Babel教程：引入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。
博客：姜瑞涛的官方网站
原文链接：https://www.jiangruitao.com/babel/use-polyfill/
版权采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议 转载需注明原文作者、链接与版权协议
