@babel/polyfill 总结

原文连接 https://babeljs.io/docs/en/ba...

@babel/polyfill

Babel 包含一个polyfill 库。这个库里包含 regenerator 和 core-js.

这个库将会模拟一个彻底的 ES2015+ 的环境。

这意味着你可使用 新的内置语法 好比 promise 或者 WeakMap， 静态方法好比Array.from 或 Object.assign, 实例方法 好比 Array.prototype.includes 和 generator 函数。

Installation

npm install --save @babel/polyfill

这个是在你的source code 前运行的，因此安装的时候是 --save

size

polyfill 用起来很方便，可是你应该和 @babel/preset-env 以及 useBuiltIns option 一块儿用。这样在使用的时候就不会包含那些咱们通常不会用到的polyfill 了。若是不这样作的话，咱们仍是建议你手动引入你须要的每一个polyfill

TC39 提案

若是你想使用一些不在 Stage 4 中的提案，@babel/polyfill 不会自动帮你引入它们。你能够从 core-js 中单独引入。

usage in Node/Browserify/Webpack

为了引入polyfill。你须要在你应用的 entry point 的头部引入它

确保 它在 其余代码或者 引用前被调用

require('@babel/polyfill')

若是你使用的是es6 的import 语法，你也要在入口点的顶部引入polyfill,以确保首先加载polyfill。

import '@babel/polyfill'

webpack 集成polyfill

• 和@babel/preset-env 一块儿用的时候

  • 若是在.babelrc 中指定 useBuiltIns: 'usage'的话，那么就不要在webpack.config.js 的 entry array 和source 中包含 @babel/polyfill 了。注意，@babel/polyfill 依然须要安装
  • 若是在.babelrc 中指定 useBuiltIns: 'entry'的话，那么就要和上面讨论的同样，在你应用的入口文件顶部经过require 或者 import 引入@babel/polyfill.
  • 若是在.babelrc 中没有指定 useBuiltIns 的值或者 设置 useBuiltIns: false. 能够直接在webpack.config.js 的 entry array 中添加 @babel/polyfill

  module.exports = {
          entry: ['@babel/polyfill', './app']
      }

• 若是没有使用@babel/preset-env.那么就能够像咱们上面讨论的同样把@babel/polyfill 添加到webpack 的entry array 中。你也能够直接经过import 或require 把它添加到应用的入口文件顶部。可是咱们并不推荐这么作

Usage in Browser

在浏览器中使用的话，直接引入@babel/polyfill 发布的文件dist/polyfill.js 就好了。
这个文件须要包含在全部你编译好的代码以前。你能够把它放在你编译好的代码以前，也能够放在一个script 标签之中。