在前端开发过程中，我们经常会使用到编译工具，例如 Babel。Babel 用于将 ES6 代码转换为 ES5 代码，以兼容更多浏览器。然而，在转换过程中会产生一些 “副作用”，例如会在生成的代码中添加各种 helper 函数。
这些 helper 函数只是对原生 JavaScript API 进行的简单封装，因此它们的实现被内联到你的代码中，这将导致生成的代码变得更大，且执行效率较低。
为了避免这些问题，我们可以使用一个非常实用的 npm 包，即 transform-runtime。
transform-runtime 是 Babel 预设之一的一部分，它通过在代码转换过程中使用 @babel/runtime 来代替直接在代码中包含 helper 函数。
使用 transform-runtime 的好处有：
- 动态引入 helper 函数，避免将其内联到每个模块中造成冗余。
- 通过指定需要的 helper 函数，减少生成的代码体积。
- 必要时可以使用 es module 的方式进行引用。
- 兼容 node.js 环境。
下面，我们来介绍如何使用 transform-runtime。
安装
我们可以使用 npm 命令行来安装 transform-runtime。
npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/runtime
其中：
- @babel/runtime：转换 ES6 代码时使用的实际 transformer。
- @babel/plugin-transform-runtime：Babel 插件，用于在 Babel 编译过程中注入 @babel/runtime。
配置
在 Babel 配置文件中，我们需要添加 @babel/plugin-transform-runtime 插件，并指定 @babel/runtime 包作为引用库。
-- -------------------- ---- -------
-
---------- -
--------------------- - --------- -- -------------- ------- --
--
---------- -
----------------------------------- -
--------- --
---------- ------
-------------- -----
--------------- ------
------------------ ------
---------- -------
--
-
-其中：
- corejs：指定要使用的 core-js 版本。
- helpers：如果为 true，则 babel 会转换 ES6 中的常用编程辅助函数（例如：_ extend）成更优化的形式，其产生的代码会重复，因此我们可以通过 false 关闭 helper 函数功能。
- regenerator：是否转换 generator 函数。
- useESModules：是否启用 ES Modules 而不是 CommonJS。
- absoluteRuntime：如果为 true，Babel 会在编译时使用 @babel/runtime 而不是相对路径引用。
- version：指定使用的 @babel/runtime 版本。
使用
配置文件完成后，我们可以在代码中以以下方式使用 transform-runtime。
-- -------------------- ---- -------
------ -----------------
------ ------------------------------
------ - ---- - ---- -------
------ - --- - ---- -----------------
----- ---- - -
------- ------
--------- ------
---------- ----------------
--
----- ---- - -------------
----- ----- - ----------
-------- -- --
----- ----------
------- ------------
-------- ------------
---
--
-----------------------------在代码中，我们还需要引用：
- core-js/stable：可以按需加载 polyfill 支持。
- regenerator-runtime/runtime：如果使用了 generator 函数，则需要引用。
另外，我们还可以通过 import { xxx as _xxx } from '@babel/runtime' 的方式，引用实际的 helper 函数。
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray"; const arr = _toConsumableArray([1, 2, 3]);
总结
使用 transform-runtime，可以大大减少编译输出的冗余代码，从而提升了性能，减小了文件体积。
在实际开发中，我们需要注意以下几点：
- 在编写代码时，选择性引入包内 helper 函数。
- 如果有 generator 函数的使用，需要引入 regenerator-runtime/runtime。
- 为了兼容更多浏览器，建议引入 core-js/stable，以便支持 polyfill。
以上是 transform-runtime 使用教程的内容，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eeda9e0b5cbfe1ea06102c6