当前位置: > > > JS - Babel使用详解3(使用babel-polyfill实现对ES6新API的支持)

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,比如 IteratorGeneratorSetMapsProxyReflectSymbolPromise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assignArray.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 访问会发现,代码已经可以正常执行了。
评论1
  • 1楼
    2017-11-27 11:40
    啊哈哈

    可以

    站长回复

    好的。