在 Babel 工具链中揭开 @babel/helpers 和 @babel/runtime 的神秘面纱

一、前言

在探索 Babel 工具链的奥秘时，我们了解了 Babel 插件的强大功能，它们能够将现代 JavaScript 代码转换为兼容旧浏览器的代码。但今天，我们把目光转向两个鲜为人知但同样重要的模块：@babel/helpers 和 @babel/runtime。这两个库虽然没有插件那么常见，却在 Babel 工具链中扮演着不可或缺的角色。

二、揭秘 @babel/helpers

@babel/helpers 是一个包含各种辅助函数的库，这些函数被用于转换过程中的代码优化。这些辅助函数可以完成各种各样的任务，包括：

• 类型检查： 辅助函数可以帮助检查变量的类型，确保它们符合预期的类型。
• 对象操作： 辅助函数可以帮助创建和操作对象，例如合并对象或获取对象的键。
• 数组操作： 辅助函数可以帮助创建和操作数组，例如合并数组或获取数组的长度。
• 函数操作： 辅助函数可以帮助创建和操作函数，例如绑定函数或获取函数的名称。

在 Babel 的转换过程中，@babel/helpers 库中的函数可以被插件调用，以优化生成的代码。例如，插件可以使用 @babel/helpers.interopRequireDefault 函数来导入一个模块的默认导出，或者使用 @babel/helpers.extends 函数来合并两个对象。

三、深入理解 @babel/runtime

@babel/runtime 是一个包含各种运行时函数的库，这些函数被用于转换后的代码中，以提供对新特性的支持。这些运行时函数可以完成各种各样的任务，包括：

• regeneratorRuntime： 这个函数用于支持 async/await 语法。
• core-js： 这个函数用于提供对 ES6 及以上版本的语言特性的支持。
• @babel/runtime-corejs3： 这个函数用于提供对 ES6 及以上版本的语言特性的支持，但它与 core-js 相比更加模块化。

在 Babel 的转换过程中，@babel/runtime 库中的函数可以被插件或预设添加至生成的代码中。例如，插件可以使用 @babel/runtime.regeneratorRuntime 函数来添加对 async/await 语法 的支持，或者使用 @babel/runtime.core-js 函数来添加对 ES6 及以上版本的语言特性的支持。

四、合理利用 @babel/helpers 和 @babel/runtime

虽然 @babel/helpers 和 @babel/runtime 库很少被直接使用，但它们在 Babel 工具链中扮演着至关重要的角色。开发人员可以利用这两个库来优化代码转换过程，并为旧浏览器提供对新特性的支持。

需要注意的是，在使用 @babel/helpers 和 @babel/runtime 库时，应该仔细考虑是否需要添加这些库。如果项目中没有使用到相应的特性，则无需添加这些库，否则会增加代码的体积和复杂性。

五、结语

@babel/helpers 和 @babel/runtime 是 Babel 工具链中不可或缺的两个模块，它们在代码转换过程中发挥着重要的作用。虽然这两个库很少被直接使用，但它们却为 Babel 工具链提供了强大的支持。开发人员可以利用这两个库来优化代码转换过程，并为旧浏览器提供对新特性的支持。