项目中只使用了Promise和async函数 如何正确的引入polyfill

项目中只使用到了Promise和async函数，如何正确的引入polyfill呢

我们知道polyfill的作用是为一些低版本浏览器提供一些辅助函数，比如在ie中window下是没有promise对象的，那么polyfill的作用是为其window手动创建一个对象并挂载到window上。

另外向一些数组的高级方法，polyfill也是为其提供兼容的处理。

简单介绍下我的项目，我需要写一个插件发布到npm上去供其他同学使用，但是在开发过程中Promise和async太香了，所以就直接使用了，但是在处理webpack打包的时候，如何引入polyfill让我犯了难。

1.如果直接这样写

在项目中直接把polyfill引进去是没问题的，正常运行。但是观其大小，未压缩的240kb，压缩后的99kb。这就很难受了  因为我自己写的代码只有5kb，这个包差不多是逻辑代码的20倍之多。这肯定是不想看到的。

想要代码瘦身，就必须知道这些高级语法对应的是哪个babel  然后分别引入

通过百度，很容易发现Promise依赖的包在core-js/fn/promise中，所以直接把promise的依赖babel引入就可以了

这就解决了promise的问题，但是再去百度async函数依赖哪个babel，网上的答案真的是让人不敢恭维。

其中babel官网是这样解释的

那么我按babel中说的  创建了.babelrc并在里边引入了@babel/plugin-transform-runtime，此时却发现打包后我的打包文件变形了，变成了module模式。

这也是我不想看到的  因为我的webpack是这样写的

我希望的是暴露出来一个函数叫consumerFeReportLog，显然这种方式与我的目标相差甚远。

因为我们知道async是Generator和co模块的语法糖

所以通过查看打包出来的代码  很容易找到async依赖的第一个包core-js/fn/symbol/async-iterator，然后追其打包后的函数发现里边还有一个runtime函数  这个函数没有定义，那么需要找一个提供这个函数的依赖包，最后找是regenerator-runtime/runtime

所以解决async依赖的包  可以这样

 

这样处理完后 再打包出来的代码就小多了。