@babel/polyfill的使用

@babel/polyfill使用的坑还是比较多的：

最需要理解的是，babel只会转换E6语法，而不会转换新的api，让新的api生效的方法是使用传统的polyfill，为此需要引入这个模块
安装的时候必须用 --save 保证引用到生产环境而不是开发环境，当然，弄错了，自己手动在package.json中修改也是可以的。
浏览器环境下使用，用script标签引用模块下的polyfill.min.js文件，即可实现polyfill的导入

坑主要在于：

有些人不理解@babel/polyfill到底做了什么，以为运行了命令行工具也会将新的api转换成原有代码，事实上只是引入了大量的polyfill而已
浏览器环境下使用@babel/standalone动态的将ES6转换成ES5，针对IE11，模块引用了Object.assign这个新的api,因此需要使用@babel/polyfill。当然，自己写一个polyfill实现也是可以的。

以下的官方文档翻译：最后，我会给出一个在IE11下使用@babel/standalone和@babel/polyfill的例子，不过还是要强调一点，真实开发还是使用命令行工具，直接转成ES5再运行，这样效率会更高，也不会耦合。

@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。

扫描二维码关注公众号，回复： 5663998 查看本文章

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 标签之中。

例子：

<!DOCTYPE html>
<html>
<head>
	<title>浏览器环境babel</title>
	<meta charset="utf-8">
</head>
<body>
	<div id="output"></div>
    <!-- 引入polyfill 让es6新的api能够在ie11上使用 这其实和babel没什么关系 -->
	<script type="text/javascript" src="./polyfill.min.js"></script>
    <!-- 引用@babel/standalone 这个是babel在浏览器上使用的模块 会把ES6转成ES5 但是它依赖ES6的新api -->
	<script type="text/javascript" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	<script type="text/babel">
		const getMessage = () => "Hello World";
		document.getElementById('output').innerHTML = getMessage();
	</script>
</body>
</html>

完全理解这个依赖过程，之后就可以顺心所欲的使用了。