babel【2】：引入 polyfill

一、为什么要引入 polyfill

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

1. 语法转换
2. 补齐API

• 2、上一节 Babel快速入门 我们讲的是其实是用 Babel 进行语法转换，把 ES6 的箭头函数语法转换成了 ES5 的函数定义语法。 箭头函数语法、async 函数语法、class 定义类语法和解构赋值等等都是 ES6 新增的语法。
• 3、那什么是补齐 API？ 简单解释就是，通过 Polyfill 的方式在目标环境中添加缺失的特性 。
  我们按照上一节的操作对 var promise = Promise.resolve('ok') 进行转换，会发现转换后的代码并没有改变，过程如下。

二、引入 polyfill

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

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

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

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

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

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

• 4、然后执行命令

npx babel main.js -o compiled.js

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

var promise = Promise.resolve('ok')

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

"use strict";
var fn = function fn(num) {
  return num + 2;
};
var promise = Promise.resolve('ok');

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

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

image.png

为何 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 的方式。

三、小结

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

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