babel-polyfill和tranform-runtime的比较

babel-polyfill的官网里有关于我们遇到的常见疑问的最好解释，下面就一一列举说明：

生产依赖而不是开发依赖

babel-polyfill是一个polyfill，是需要在我们代码之前运行的代码，因此它需要被包含在生产代码中。

包体很大，按需加载

babel-polyfill包罗万象，里面包含了太多的ES5+polyfill，可想而知，整个引入进来，我们的代码体积会大大增大。官网并不建议我们把整个包都引入，而是按需加载。按需加载的方式有两种，手动引入需要的polyfill，或者使用环境设置属性useBuiltIns ，这个属性在@babel/preset-env预设里进行配置。

在Webpack中使用

首先必须保证，babel-polyfill在最前面被引入，因为它要先执行，通过require或者import都可以引入。除此之外，还有另外一种方式：

module.exports = {
  entry: ["babel-polyfill", "./app/js"],
};

如何没有使用useBuiltIns ，上面这种方式是官方推荐的写法。但是这种写法，按需加载没办法生效。所以想要按需加载，还是需要通过require或者import引入。

终于说到tranform-runtime

感觉网上关于tranform-runtime的理解大部分都有偏颇。这个插件并没有提供code polyfill的功能，它的作用是帮助babel复用代码，另外防止babel-polyfill污染全局变量。它身上折射出的polyfill是来自babel本身，是babel本身对语法进行了转译。

参考资料

https://babeljs.io/docs/en/babel-polyfill
https://github.com/SunshowerC/blog/issues/4