JS - Babel使用详解3（使用babel-polyfill实现对ES6新API的支持）

2017-07-07 发布：hangge 阅读：10599

系列文章：
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 访问会发现，代码已经可以正常执行了。