Babel @babel/plugin-transform-runtime

本节我们来学习 @babel/plugin-transform-runtime 和 @babel/runtime 。

Babel 中使用辅助函数来实现常见功能，例如 _extend() 函数，每个编译后的文件都需要定义它所需要使用的辅助函数。但这样显然会造成很多重复，所以 Babel 把所有的辅助函数都封装于 @babel/runtime，每个编译后的文件只需要引用 @babel/runtime 即可。

@babel/runtime 插件可以将工具函数的代码转换成 require 语句，指向为对 @babel/runtime 的引用。每当要转译一个 API 时，都要手动加上 require(’@babel/runtime’)。简单说 @babel/runtime 更像是一种按需加载的实现，比如哪里需要使用 Promise，只要在这个文件头部添加如下代码即可：

require Promise from '@babel/runtime/core-js/promise'

而为了方便使用 @babel/runtime 插件，解决手动 require 的苦恼。它会分析我们的 ast 中，是否有引用 @babel/runtime （通过映射关系），如果有就会在当前模块顶部插入我们需要的垫片。

transform-runtime 是利用插件自动识别并替换代码中的新特性，所以不需要再引入，只需要装好 @babel/runtime 和配置 plugin 就可以了。

安装配置

大多数情况下，我们应该安装 @babel/plugin-transform-runtime 作为开发依赖项，即在安装命令中加上 --save-dev，并且将 @babel/runtime 作为生产依赖项，在安装命令中使用 --save。

安装命令如下所示：

> npm install --save-dev @babel/plugin-trabsform-runtime
> npm install --save @babel/runtime

安装好后，我们可以在 .babelrc 配置文件中进行配置，@babel/plugin-transform-runtime 是否要开启某项功能，都是在配置项里设置的，某些配置项的设置是需要安装 npm 包。@babel/plugin-transform-runtime 在没有设置配置的时候，其配置项参数取默认值。

下面两个配置效果是一样的：

// 默认配置
{
    "plugins": [
      "@babel/plugin-transform-runtime"
    ]
}

// 设置其配置项
{ 
    "plugins": [
      [
        "@babel/plugin-transform-runtime",
        {
          "helpers": true,
          "corejs": false,
          "regenerator": true,
          "useESModules": false,
          "absoluteRuntime": false,
          "version": "7.0.0-beta.0"
        }
      ]
    ]
}

配置项讲解

• helpers：该配置项用来设置是否要自动引入辅助函数包，取值为布尔值，默认为 true。

切换是否用对moduleName的调用替换内联的babel帮助程序（类调用检查、扩展等）。

• corejs：用来设置是否做 API 转换以避免污染全局环境。corejs 可选值为是 false、2 和 3。一般情况下 corejs 取值为 false，即不对 Promise 这一类的 API 进行转换。而在开发 JS 库的时候设置为 2 或 3。
• regenerator：和 corejs 一起用来设置是否做 API 转换以避免污染全局环境。regenerator 取值为布尔值，默认为 true。
• useESModules：用来设置是否使用 ES6 的模块化用法，取值为布尔值，默认为fasle。在用 webpack 一类的打包工具的时候，我们可以设置为 true，以便做静态分析。
• absoluteRuntime：用来自定义 @babel/plugin-transform-runtime 引入 @babel/runtime/ 模块的路径规则，取值是布尔值或字符串。没有特殊需求，我们不需要修改，默认为 false 即可。
• version：该项主要是和 @babel/runtime 及其进化版 @babel/runtime-corejs2、@babel/runtime-corejs3 的版本号有关系，这三个包我们只需要根据需要安装一个。我们把安装的 npm 包的版本号设置给version 即可。

优点

• 不会污染全局变量。
• 多次使用只会打包一次。
• 依赖统一按需引入，没有重复和多余的引入。

缺点

• 不支持实例化的方法，例 Array.includes(x) 就不能转化
• 如果使用的 API 用的次数不是很多，那么 transform-runtime 引入 polyfill 的包会比不是 transform-runtime 时大
• 随着应用的增大，相同的 polyfill 每个模块都要做重复的工作（检测，替换），虽然 polyfill 只是引用，编译效率不够高效。