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