在前端开发中，使用 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 包：
npm install --save @babel/runtime
步骤二：安装 @babel/plugin-transform-runtime 插件
在终端中输入以下命令，安装 @babel/plugin-transform-runtime 插件：
npm install --save-dev @babel/plugin-transform-runtime
步骤三：配置 .babelrc 文件
在项目根目录下创建 .babelrc 文件，并添加以下配置：
-- -------------------- ---- -------
-
---------- -
--------------------- -
-------------- --------
--------- -
--
--
---------- -
----------------------------------- -
--------- -
--
-
-步骤四：重新编译代码
在终端中输入以下命令，重新编译代码：
npm run build
现在，你的代码应该已经成功编译了。
示例代码
为了更好地理解这个问题以及解决方案，我们来看一个示例代码。
-- -------------------- ---- ------- ------ - --- - ---- --------- ----- --- - --- -- --- ----- ------ - -------- ------ -- - ------ ---- - -- --- --------------------
在这个示例代码中，我们使用了 lodash 的 map 函数，这个函数需要从 @babel/runtime/helpers 中引入。
如果你没有按照上面的步骤进行操作，你可能会在编译过程中遇到以下错误：
Module not found: Error: Can't resolve '@babel/runtime/helpers/interopRequireDefault' in '/path/to/project'
这个错误提示了无法找到 @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