首页 > 建站教程 > JS、jQ、TS >  JS - Babel使用详解3(使用babel-polyfill实现对ES6新API的支持)正文

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