[TOC] >[success] # babel -- 初步上手之各种配置@babel/plugin-transform-runtime ~~~ 1.'@babel/plugin-transform-runtime'为了解决两个问题 　1.1.babel/plugin-transform-runtime 解决全局污染问题　 　1.2.动移除语法转换后内联的辅助函数（inline Babel helpers），使用@babel/runtime/helpers里的辅助函 　数来替代 ~~~ >[info] ## 通过说人话的案例解释说明 >[danger] ##### 解释1.1 * 没有使用'@babel/plugin-transform-runtime' ~~~ 1.没有使用'@babel/plugin-transform-runtime' 配置如下： { "presets": [ [ "@babel/env",{ "modules": false, "useBuiltIns": "usage", "targets": { "ie":8 }, "corejs": 3 } ] ] } const promise = new Promise(); '转换后代码'： import "core-js/modules/es.object.to-string.js"; import "core-js/modules/es.promise.js"; var promise = new Promise(() => {}); console.log(promise); 可以发现虽然转换了api，但是实际上也造成了全局污染帮我们导入了一个Promise,当原本浏览 器环境的Promise 将变成corejs 引入的Promise ~~~  * 使用@babel/plugin-transform-runtime ~~~ 1.安装'@babel/plugin-transform-runtime ',"npm install @babel/plugin-transform-runtime" { "presets": [ [ "@babel/env", ] ], "plugins": [ [ "@babel/plugin-transform-runtime", { "absoluteRuntime": false, "corejs": 3, "helpers": true, "regenerator": true, "useESModules": false, } ] ] } const promise = new Promise(); '转换后代码'： import _Promise from "@babel/runtime-corejs3/core-js-stable/promise"; var promise = new _Promise(); 可以发现已经重新一个名字' _Promise' 避免了和' Promise' 冲突 ~~~  >[danger] ##### 解释1.2 * 使用'babel/plugin-transform-runtime' ~~~ 1.统一引入helpers 函数，所有的 helper 都会引用模块 babel-runtime，以避免编译输出的重复问题。这个运行时会被编译到你的 构建版本当中。 ~~~  * 没有使用babel/plugin-transform-runtime ~~~ 1.如果没有使用实际操作的是'@babel/helpers'每个有class的文件都自动引入这个那将会额外增加 定义 ~~~  >[danger] ##### 参数介绍 ~~~ 1.如果只使用 "@babel/plugin-transform-runtime" 并没有配置参数，参数默认配置如下 { "plugins": [ [ "@babel/plugin-transform-runtime", { "absoluteRuntime": false, "corejs": false, "helpers": true, "regenerator": true, "useESModules": false } ] ] } 1.1.corejs，指定不污染全局的垫片api 版本配置 1.1.1.corejs 为 3，需要预先安装 @babel/runtime-corejs3 1.1.2.配置 corejs 为 2，需要预先安装 @babel/runtime-corejs2 1.1.3.配置 corejs 为 false，无corejs 使用, 1.2.helpers该项是用来设置是否要自动引入辅助函数包 1.3.该项用来自定义@babel/plugin-transform-runtime引入@babel/runtime/模块的路径规则， 取值是布尔值或字符串。没有特殊需求，我们不需要修改，保持默认false即可。 1.4.regenerator，开启引入regenerator，一般开启就好 ~~~ >[danger] ##### @babel/plugin-transform-runtime 和 @babel/runtime 一起来看 ~~~ 1.如果不使用'@babel/plugin-transform-runtime' 也不会使用'@babel/runtime' 的helpers 帮助函数 此时使用时'@babel/helpers' 的帮助函数 ~~~ >[danger] ##### @babel/plugin-transform-runtime 场景 ~~~ 1.仿佛'@babel/plugin-transform-runtime'优点很多，可以解决polyfill 全局污染问题　，还可以将语法转换后内联的辅助函数 进行提取，但实际是他和'target' 冲突，也就是说你配置的'target' 浏览器版本并不会影响他决定 是否使用目前版本的corejs 垫片因为babel 中插件的应用顺序是：先 plugin 再 preset，plugin 从 左到右，preset 从右到左，这样 plugin-transform-runtime 是在 preset-env 前面的。等 @babel/plugin-transform-runtime 转完了之后，再交给 preset-env 这时候已经做了无用的转换 了。而 @babel/plugin-transform-runtime 并不支持 targets 的配置，就会做一些多余的转换和 polyfill。 2.其实上面案例也能发现在使用'@babel/plugin-transform-runtime ' core.js 导入也变了变成 了'@babel/runtime-corejs3/core-js-stable' 这是因为之前'corejs' 版本的导入是污染全局的，你想 使用独立不的，需要'runtime-corejs3' 包因此也需要安装'runtime-corejs3' 3.如图下面配置 我们将 class A {} new Promise(); 转换为 import _Promise from "@babel/runtime-corejs3/core-js-stable/promise"; class A {} new _Promise(); 可以发现配置"@babel/env"设置了target 设置了 corejs，但最后使用的都是 '@babel/plugin-transform-runtime ' 配置项，引入@babel/runtime-corejs3/core-js-stable/， 以此来替代全局引入的core-js/stable;使用'@babel/runtime' helpers 帮助函数 ~~~  >[danger] ##### 总结 ~~~ 1.@babel/plugin-transform-runtime 需要和 @babel/runtime 配合使用； 2.@babel/plugin-transform-runtime 将业务代码编译，引用 @babel/runtime 提供的 helpers，达 到缩减编译产出体积的目的； 3.另外，@babel/plugin-transform-runtime 和 @babel/runtime 结合还有一个作用：它除了可以对 产出代码瘦身以外，还能避免污染全局作用域 4.@babel/plugin-transform-runtime 和 @babel/runtime 这种组合配合更适合是开发第三方工具 库，类库开发尽量不使用污染全局环境的 ~~~