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-polyfill2,使用样例
(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 访问会发现,代码已经可以正常执行了。