分类
Javascript

使用transform-runtime

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