@babel/plugin-transform-runtime 这个包的使用场景是什么

@babel/plugin-transform-runtime 是 Babel 转译工具的一个插件，用于处理 JavaScript 代码中的新语言特性和 API。它的使用场景主要包括以下几个方面：

1. 避免全局污染:
   当使用 Babel 转译包含新特性的代码（如箭头函数、解构赋值、模板字符串等）时，Babel 通常会生成辅助函数（helper functions）以实现这些特性的向下兼容。如果不使用 @babel/plugin-transform-runtime，这些辅助函数会被直接注入到每个转译后的文件中，可能导致全局作用域被污染。而该插件会将这些辅助函数集中放在一个单独的运行时库（如 @babel/runtime）中，通过模块导入的方式使用，从而避免全局污染。

2. 按需引入 polyfills:
   对于 ECMAScript 标准库中新增的 API（如 Promise、Set、Map、Array.from 等），@babel/plugin-transform-runtime 会自动识别并替换为运行时库提供的同名函数，而不是在全局范围内添加 polyfills。这样可以确保只对实际用到的 API 进行 polyfill，减小最终生成代码的体积，提高加载效率。

3. 保持模块化:
   对于使用模块化（如 CommonJS 或 ES modules）的项目，@babel/plugin-transform-runtime 有助于保持模块化的语义。通过引入对应的运行时模块，而不是直接在全局添加 polyfills 或辅助函数，可以确保模块间的独立性和互不影响。

具体使用场景包括：

• 构建库或组件:
  开发 JavaScript 库或 UI 组件时，为了避免库的使用者受到库内部 Babel 转换带来的全局影响，通常会使用 @babel/plugin-transform-runtime。这样库的消费者可以独立管理自己的 Babel 设置，而不会因为库的转译结果导致全局作用域冲突或 polyfill 重复。

• 优化生产环境构建:
  在生产环境中，为了减小最终生成的 JavaScript 文件大小，提高加载速度，会倾向于按需引入 polyfills。通过配置 @babel/plugin-transform-runtime，可以确保只有实际使用的 ES 新特性或 API 的 polyfill 被引入，避免无谓的代码膨胀。

• 维护长期运行的服务:
  对于需要持续维护和更新的后端服务或长时间运行的前端应用，使用 @babel/plugin-transform-runtime 可以保持代码的整洁和模块化，便于未来的代码维护和升级。即使项目随着时间推移引入更多新特性和 API，也不会导致全局作用域变得混乱。

• 严格控制全局作用域:
  在一些对全局作用域控制要求较高的场景，如编写沙箱环境、嵌入式脚本、或与其他第三方库高度集成的项目中，使用 @babel/plugin-transform-runtime 可以确保转译后的代码不会无意间修改或依赖全局状态，降低潜在的兼容性和冲突问题。

总的来说，@babel/plugin-transform-runtime 主要用于在进行 Babel 转译时，保持代码的模块化、避免全局作用域污染、按需引入 polyfills，适用于需要编译新特性的 JavaScript 代码，并关注代码体积、模块独立性和长期维护性的各种项目。

那么使用了@babel/plugin-transform-runtime 还需要使用@babel/preset-env吗？

虽然 @babel/plugin-transform-runtime 和 @babel/preset-env 在功能上有所交集，但它们在 Babel 转译流程中扮演着不同的角色，且通常会一起使用。下面分别介绍这两个工具，并解释为何同时使用它们是有益的：

@babel/preset-env

@babel/preset-env 是一个预设（preset），它集合了一组插件，用于根据目标环境（target environments）自动转译当前版本 JavaScript 中的新特性和语法到旧版浏览器或其他执行环境能够理解的形式。主要功能包括：

• 自动配置插件:
  根据项目中的 .browserslistrc 文件（或者在 preset-env 配置中直接指定的目标环境）和 Babel 的内置映射表，preset-env 会自动启用所需的插件来转译相应的语言特性和 API。

• polyfill 管理:
  preset-env 与 @babel/polyfill（现已弃用，推荐使用 core-js 和 regenerator-runtime 分别处理基础库和生成器函数的 polyfill）或 @babel/plugin-polyfill-regenerator 结合使用，可以自动引入必要的 polyfills 以支持目标环境中未实现的原生 API。这可以通过设置 useBuiltIns 选项为 "usage" 实现按需引入 polyfills。

@babel/plugin-transform-runtime

如前所述，@babel/plugin-transform-runtime 主要是解决全局污染、按需引入 polyfills 和保持模块化的问题。它不负责决定哪些特性和 API 需要转译，而是针对已经确定需要转译的内容提供更细致的处理方式。

为何同时使用？

尽管 @babel/plugin-transform-runtime 可以避免全局污染并按需引入 polyfills，但它本身并不负责检测源代码中使用了哪些新特性和 API，也不根据目标环境决定是否需要转译。这部分工作仍然需要由 @babel/preset-env 来完成。因此，在大多数情况下，你会同时使用这两个工具：

• 使用 @babel/preset-env 根据目标环境自动配置转译所需的插件，并配合其他手段（如 useBuiltIns: "usage" 和 core-js）按需引入 polyfills。

• 同时添加 @babel/plugin-transform-runtime 到你的 Babel 配置中，确保转译过程中生成的辅助函数和按需引入的 polyfills 以模块化的方式引入，避免全局污染。

综上所述，使用了 @babel/plugin-transform-runtime 通常仍需要配合使用 @babel/preset-env，以便全面、自动地处理代码的转译需求，并保持代码的模块化和避免全局污染。
两者结合使用可以提供一个既高效又易于维护的 Babel 转译方案。

@babel/runtime-corejs3 = @babel/runtime + core-js 3 吗？

@babel/runtime-corejs3 并不是简单等于 @babel/runtime 加上 core-js 3，而是一个包含了 @babel/runtime 功能并特定绑定到 core-js 3 的版本。具体来说：

• @babel/runtime：
  这是一个独立的包，包含了一系列 Babel 转译时生成的辅助函数（runtime helpers）。当使用某些 Babel 插件（如 @babel/plugin-transform-runtime）时，这些辅助函数会被引用，而不是在每个转译后的模块中重复生成。这样做的好处是减少了最终代码体积，因为辅助函数只需在项目中一次性引入，避免了重复。@babel/runtime 不包含任何 polyfills，仅关注于提供转译所需的运行时支持。

• core-js：
  这是一个广泛使用的 JavaScript 库，提供了对 ECMAScript 规范中定义的各种 API 的 polyfills，用于在旧版浏览器或不完全支持现代 JavaScript 特性的环境中实现兼容性。core-js 包含了诸如 Promise、Symbol、Map、Set、迭代器、生成器等众多 ES2015 及更高版本特性的实现。

• @babel/runtime-corejs3：
  这是一个特殊的版本，结合了 @babel/runtime 的功能与对 core-js 3 版本的依赖。当配合 @babel/plugin-transform-runtime 使用时，它不仅提供运行时辅助函数，还会按需引入 core-js 3 中的 polyfills。这意味着当你的代码中使用了某个需要 polyfill 的 ES 新特性时，@babel/plugin-transform-runtime 会自动从 @babel/runtime-corejs3 引入对应的 core-js 3 polyfill，而非全局引入整个 core-js。

总结来说，@babel/runtime-corejs3 是一个集成解决方案，它整合了 @babel/runtime 的辅助函数功能与 core-js 3 版本的 polyfills。
在使用时，它能确保转译过程中的辅助函数复用和 polyfill 按需引入，从而避免全局污染，同时确保代码具有所需的新特性的兼容性支持。
所以，虽然它不是简单地等于 @babel/runtime 加上 core-js 3 的组合，但确实起到了将这两部分功能紧密关联并针对性地应用于 Babel 转译过程中的作用。

__EOF__

本文作者：龙陌
本文链接：https://www.cnblogs.com/longmo666/p/18116073.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！