如何使用Babel将ES6转码为ES5

Babel是一个转换编译器，它能将ES6转换成可以在棚明改浏览器中运行的代码槐正。Babel由来自澳大利亚的开发者SebastianMcKenzie创建。他的目标是使Babel可以处理ES6的所有新语法，并为它内链判置了ReactJSX扩展及Flow类型注解支持。据codemix创始人CharlesP

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

---