@babel/plugin-transform-runtime

@babel/plugin-transform-runtime

在对某一项目内核就行二次开发过程中，遇到了一个很奇怪的问题，前端项目使用了 Taro 分包，微信小程序规定每个包大小不超过 2M，自行编译后，主包中一个依赖资源文件就有 1.7M，在上其他一些依赖，导致了小程序主包过大，这个问题卡了我好久，本来以为是系统问题，并装了个黑苹果，当还是没能解决，经过群里老哥的帮助，终于解决了问题，解决方法竟然是把 babel 升级一下就可以了，经过测试主要还是以为 @babel/plugin-transform-runtime 的问题。

@babel/plugin-transform-runtime 有三大作用，其中之一就是自动移除语法转换后内联的辅助函数（inline Babel helpers），使用 @babel/runtime/helpers 里的辅助函数来替代。这样也就解决了代码复用和最终文件体积大的问题。

安装配置#

安装 @babel/plugin-transform-runtime 为开发依赖项，将 @babel/runtime 作为生产依赖项

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

配置文件#

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

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

helpers：该配置项用来设置是否要自动引入辅助函数包，取值为布尔值，默认为 true。
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 即可。