JS - Babel使用详解3(使用babel-polyfill实现对ES6新API的支持)
系列文章:
JS - Babel使用详解1(基本介绍、使用babel-standalone实现ES6在线转换)
JS - Babel使用详解2(使用babel-cli命令行进行ES6本地转码)
[当前文章] JS - Babel使用详解3(使用babel-polyfill实现对ES6新API的支持)
JS - Babel使用详解1(基本介绍、使用babel-standalone实现ES6在线转换)
JS - Babel使用详解2(使用babel-cli命令行进行ES6本地转码)
[当前文章] JS - Babel使用详解3(使用babel-polyfill实现对ES6新API的支持)
一、babel-polyfill 介绍
1,babel-polyfill 的作用
Babel 默认只转码 ES6 的新语法(syntax),而不转换新的 API,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign、Array.from)都不会转码。如果想让这些方法运行,必须使用 babel-polyfill,为当前环境提供一个垫片。
2,支持的新特性
通过 babel-polyfill 插件让我们可以使用如下新 API:
- ArrayBuffer
- Array.from
- Array.of
- Array#copyWithin
- Array#fill
- Array#find
- Array#findIndex
- Function#name
- Map
- Math.acosh
- Math.hypot
- Math.imul
- Number.isNaN
- Number.isInteger
- Object.assign
- Object.getOwnPropertyDescriptors
- Object.is
- Object.entries
- Object.values
- Object.setPrototypeOf
- Promise
- Reflect
- RegExp#flags
- Set
- String#codePointAt
- String#endsWith
- String.fromCodePoint
- String#includes
- String.raw
- String#repeat
- String#startsWith
- String#padStart
- String#padEnd
- Symbol
- WeakMap
- WeakSet
二、babel-polyfill 的安装与使用
1,安装
进入到项目文件夹,执行如下命令即可实现 polyfill 插件的安装。npm install --save-dev babel-polyfill
2,使用样例
(1)假设我们页面代码如下,其中用到了 Array.from() 这个 ES6 新增的方法,其作用是从一个类似数组或可迭代的对象中创建一个新的数组实例。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hangge.com</title> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel"> var arrayLike = { '0': 1, '1': 2, '2': 3, length: 3 }; // Array.from为ES6新添加的方法 var arr2 = Array.from(arrayLike, x => x + x); console.log(arr2); // [2, 4, 6] </script> </head> <body> </body> </html>
(2)我们如果使用 IE9 访问这个页面,虽然我们已经引入了 babel,但仍然会报“对象不支持 from 属性或方法”这个错误。

(3)这是我们将 polyfill.js 或者 polyfill.min.js 引入进来。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hangge.com</title> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/javascript" src="node_modules\babel-polyfill\dist\polyfill.min.js"></script> <script type="text/babel"> var arrayLike = { '0': 1, '1': 2, '2': 3, length: 3 }; // Array.from为ES6新添加的方法 var arr2 = Array.from(arrayLike, x => x + x); console.log(arr2); // [2, 4, 6] </script> </head> <body> </body> </html>
(4)再次使用 IE9 访问会发现,代码已经可以正常执行了。

可以