babel-polyfill使用

解决ie9和一些低版本的高级浏览器对es6新语法并不支持问题

npm install --save-dev babel-polyfill

babel-polyfill用正确的姿势安装之后，引用方式有三种：

1.require("babel-polyfill")

2.import "babel-polyfill"

3.webpack.config.js

module.exports = {

entry: ["babel-polyfill", "./app/js"]

}

我们通过一个 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 的方式。

我们在 IE9 打开验证，也可以用

Firefox27 等低版本的浏览器验证。这个时候发现可以正常运行了。

补齐 API 的方式除了通过引入

polyfill.js 文件 ，还有通过在构建工具入口文件（例如 webapck ），babel 配置文件等方式进行。本节讲的通过在 HTML 里直接引入

polyfill.js 文件 这种方式进行在现代前端工程里逐渐淘汰，很少使用了。但这种方式对初学者理解 polyfill 是做什么的是简单直接的。后续章节我们会学习到其它补齐 API 的方式。

Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

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

相比方法1, 相当于抽离了公共模块, 避免了重复引入, 从一个叫core.js的库中引入所需polyfill(一个国外大神用ES3写的ES5+ polyfill)

.babelrc示例

---