上一次我们给大家介绍了怎样使用babel-polyfill。只要引入这个插件就能就很好地兼容IE浏览器了,但是这会导致最终的打包文件偏大,即使打开了useBuiltIns,效果也不明显。作为前端架构师,要对代码质量及性能比较高的要求。前期开发赶进度也就罢了,上生产前一定要花时间优化。本文我们就来介绍transform-runtime。
Why?
transform-runtime编译器插件做了以下三件事:
- 使用generators/async 函数时,自动引入babel-runtime/regenerator;
- 自动引入babel-runtime/core-js并映射ES6静态方法和内置插件;
- 移除内联的Babel helper并使用模块 babel-runtime/helpers 代替。
How?
1、安装
在大多数情况下,你应该安装babel-plugin-transform-runtime作为开发依赖(使用 –save-dev)。
npm install -D babel-plugin-transform-runtime
并且将 babel-runtime 作为生产依赖(使用 –save)。
npm install -S babel-runtime
2、配置插件
在.babelrc中配置babel-plugin-transform-runtime插件。不需要指定useBuiltIns。
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": [ "ie >=10" ] } }] ], "plugins": ["transform-runtime"] }
3. 使用上一篇文中同样的main.js。不需要import babel-polyfill。使用相同的webpack设置并支持。这个简单实例有最终的打包只有20k。比起全局babel-polyfill小多了。
注意
transform-runtime编译器插件被polyfill的对象是临时构造并被import/require的,并不是真正挂载到全局,对于实例化对象的方法,如[].include(x)等实例方法将不会正常工作。因此,如果你的App需要API实例方法补齐,目前不适合使用这个插件的。