使用 transform-runtime

上一次我们给大家介绍了怎样使用 babel-polyfill。只要引入这个插件就能就很好地兼容IE浏览器了，但是这会导致最终的打包文件偏大，即使打开了 useBuiltIns，效果也不明显。作为有追求的前端工程师，要对代码质量及性能比较高的要求。前期开发赶进度也就罢了，上生产前一定要花时间优化。本文我们就来介绍 transform-runtime。

为什么使用?

Babel 使用了非常小的 helpers 来实现诸如 _extend 等常用功能。默认情况下，它将被添加到每个通过 require 引用它的文件中。这种重复（操作）有时是不必要的，特别是当你的应用程序被拆分为多个文件时。

这时则需要使用 transform-runtime：所有的 helper 都会引用模块 babel-runtime，以避免编译输出的重复问题。这个运行时会被编译到你的构建版本当中。

transform-runtime 编译器插件做了以下三件事：

• 使用 generators/async 函数时，自动引入 babel-runtime/regenerator；
• 自动引入 babel-runtime/core-js 并映射 ES6 静态方法和内置插件；
• 移除内联的 Babel helper 并使用模块 babel-runtime/helpers 代替。

怎样使用?

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 实例方法补齐，目前不适合使用这个插件。