上一次我们给大家介绍了怎样使用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实例方法补齐，目前不适合使用这个插件的。