babel7.4之后babelpolyfill是否继续使用和怎么用的问题

babel 7 现状

写本文的时候 babel 是 7.8 版本，可以看到从 7.4 开始，就不推荐使用 @babel/polyfill 了，但是现在网络上连 babel 7 的文章都比较少，不用说这个问题了，于是我就亲自测试了一下。

对照关系

测试之后，可以得到如下：

依赖说明@babel/runtime就是 regenerator-runtime@babel/runtime-corejs就是 core-js，可指定版本：@babel/runtime-corejs3@babel/plugin-transform-runtime用来管理 @babel/runtime 的工具插件，管理时如何配置见官方文档@babel/polyfill以前推荐的 polyfill 工具，集成了 regenerator-runtime + core-js2 + 管理配置选项core-js提供了 es6 的对象和方法实现regenerator-runtime提供了 es6 异步关键词的实现

也就是说，无论如何安装和使用你都要有 core-js 和 regenerator-runtime 这两个东西，最好还是 core-js3 。

那问题来了，我们不光光需要 core-js 和 regenerator-runtime ，我们还要能配置他们，所以配置工具必须要选用 @babel/plugin-transform-runtime 或者 @babel/polyfill ，但是 @babel/polyfill 却不推荐使用了，所幸的是还有很多人都在用 @babel/polyfill ，于是官方允许依赖外置单独的 core-js ，而且可以指定版本号，那就简单了，我们有两种方案可选：

@babel/runtime + @babel/runtime-corejs3 + @babel/plugin-transform-runtime@babel/polyfill (包括 regenerator-runtime 和 管理工具) + core-js@3

@babel/runtime + @babel/runtime-corejs3 + @babel/plugin-transform-runtime

如果选择第一种方案，需要在 pulgin 里配置使用 core-js3 ：

{ "plugins": [ [ "@babel/plugin-transform-runtime", { "absoluteRuntime": false, "corejs": false, "helpers": true, "regenerator": true, "useESModules": false, "version": "7.0.0-beta.0" } ] ] }

有关这些参数怎么填请参考官方文档说明：@babel/plugin-transform-runtime

@babel/polyfill + core-js@3

这种方案需要安装一个外部的 core-js3 ：

yarn add core-js@3

之后在配置文件里配置 useBuiltIns 和 corejs：

{ "presets": [ [ "@babel/env", { "useBuiltIns": "usage", "corejs": { "version": 3, "proposals": true } } ] ] }

这里 useBuiltIns 还有其他值可取，如果设定为 usage 就是按需导入，如果设定为 entry 则需要手动导入，很不人性化，所以我们就用 usage 即可。

原文件里需不需要手动写导入

官方文档上来就说让我们手动导入一遍：

import "core-js/stable"; import "regenerator-runtime/runtime";

其实是不需要的，会自动帮我们导入，那怎么确认这两个工具（ core-js 和 regenerator-runtime ）生没生效呢：

如果多导入了，会报错，取消导入即可如果少导入了 regenerator-runtime ，会发现文件开头部分没有导入 require(“regenerator-runtime/runtime”);如果少导入了 core-js ，会发现文件开头没有导入 object 和 promise 等方法

按照这个方法就可以判断这两个工具生效没生效。

总结

可见现在官方还没彻底放弃 @babel/polyfill ，我们直接使用外置的 core-js@3 依赖，这样就完美解决问题了。