@babel/polyfill 总结

49次阅读

共计 1356 个字符,预计需要花费 4 分钟才能阅读完成。

原文链接 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 标签之中。

正文完
 0