在前端开发中，使用 Babel 编译 ES6 代码已经成为了常态。但是，有时候在编译过程中会遇到 “Cannot find module '@babel/runtime/helpers/…” 的错误，这种错误可能会让开发者很困扰。在本文中，我们将探讨这个问题的原因，并提供解决方案。
问题原因
在使用 Babel 编译 ES6 代码时，会使用到一些辅助函数，这些函数需要从 @babel/runtime/helpers 中引入。如果在引入时出现了错误，就会出现 “Cannot find module '@babel/runtime/helpers/…” 的错误。
这种问题的原因通常是因为没有正确安装 @babel/runtime 包，或者安装的版本不兼容。
解决方案
解决这个问题的方法很简单，只需要按照以下步骤进行操作即可。
步骤一：安装 @babel/runtime 包
在终端中输入以下命令，安装 @babel/runtime 包：
--- ------- ------ --------------
步骤二：安装 @babel/plugin-transform-runtime 插件
在终端中输入以下命令，安装 @babel/plugin-transform-runtime 插件：
--- ------- ---------- -------------------------------
步骤三：配置 .babelrc 文件
在项目根目录下创建 .babelrc 文件，并添加以下配置：
-
---------- -
--------------------- -
-------------- --------
--------- -
--
--
---------- -
----------------------------------- -
--------- -
--
-
-步骤四：重新编译代码
在终端中输入以下命令，重新编译代码：
--- --- -----
现在，你的代码应该已经成功编译了。
示例代码
为了更好地理解这个问题以及解决方案，我们来看一个示例代码。
------ - --- - ---- --------- ----- --- - --- -- --- ----- ------ - -------- ------ -- - ------ ---- - -- --- --------------------
在这个示例代码中，我们使用了 lodash 的 map 函数，这个函数需要从 @babel/runtime/helpers 中引入。
如果你没有按照上面的步骤进行操作，你可能会在编译过程中遇到以下错误：
------ --- ------ ------ ----- ------- ---------------------------------------------- -- ------------------
这个错误提示了无法找到 @babel/runtime/helpers/interopRequireDefault 模块。这是因为你没有正确安装 @babel/runtime 包，或者安装的版本不兼容。
但是，如果你按照上面的步骤进行操作，你就可以成功编译这个代码了。
结论
在使用 Babel 编译 ES6 代码时，出现 “Cannot find module '@babel/runtime/helpers/…” 的错误可能是因为没有正确安装 @babel/runtime 包，或者安装的版本不兼容。解决这个问题的方法是安装 @babel/runtime 包和 @babel/plugin-transform-runtime 插件，并配置 .babelrc 文件。通过这些步骤，你就可以成功编译你的代码了。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6727053e2e7021665e1bf582