如果你使用过 Babel 来编译你的 ES6+ 代码，你可能会遇到这个错误信息：“/node_modules/xxx.js: Duplicate declaration”。这个问题通常意味着你的代码中有重复的声明，导致 Babel 在编译时出现冲突。在本文中，我将解释可能导致该错误的原因以及如何解决它。
重复声明的原因
重复声明通常是在一个模块中出现的，这个模块可能是你自己编写的，也可能是第三方模块。具体来说，当你使用 import、export 或者 require 来导入模块时，如果模块中存在重复的声明，例如重复的变量、函数或类，那么就会出现上述错误。
例如，假设我们有一个 utils.js 模块，其中定义了一个 sum 函数：
-- -------- ------ -------- ------ -- - ------ - - -- -
现在我们再在同一个模块中定义一个同名的 sum 变量：
-- -------- ------ -------- ------ -- - ------ - - -- - ----- --- - --- -- ------------- --- -------
如果我们尝试在另一个模块中导入 utils.js，Babel 就会报错：
----------------------- --------- ----------- -----
这是因为我们在 utils.js 中定义了两个同名的 sum，导致 Babel 不能确定哪个才是正确的。
解决方法
要解决重复声明的问题，我们需要确保每个声明都是唯一的。这可以通过以下方法之一实现：
1. 重命名导入的模块
如果我们在 utils.js 中定义了重复的声明，我们可以尝试重命名导入该模块中的函数、变量或类，从而避免与本地声明冲突。例如：
-- -------- ------ -------- ------ -- - ------ - - -- - ------ ----- --------- - ---
-- -------- ------ - --- -- ------ --------- - ---- ---------- ----- ------ - -------- --- -- ------------- -----------------------
这里我们将 utils.js 中的 sum 函数重命名为 mySum，并通过新名称导入它。这可以确保我们不会与本地声明发生冲突。
2. 避免重复声明
如果我们是自己编写 utils.js，那么我们可以尝试避免在同一个模块中重复定义变量、函数或类。如果必须这样做，我们可以将它们分别放在不同的文件中，或者将它们封装在不同的命名空间中。
3. 手动重写重复声明
如果以上两种方法都无法解决问题，我们最后的选择是手动重写重复声明。我们可以使用 IIFE（立即执行函数表达式）或者箭头函数来重新包装我们的代码，并确保每个声明都是唯一的。
以下是一个例子，其中包装了一个重复声明的模块：
-- -------- ------ -------- ------ -- - ------ - - -- - ----- --- - ---
-- -------- ------ - -- ----- ---- ---------- ----- --- - --- -- - ----- - ---- --------- - - ------ -- ------- --- ----- --------- ------ --------- -- -- -- ---------- ----- ------------------ ---- -- -- -
这里我们使用 IIFE 封装了模块中的代码，然后通过解构导出 sum 函数的别名，并使用它来替代声明中的 sum。
总结
重复声明通常是由于导入模块中存在重复的变量、函数或类导致的。要解决这个问题，我们可以尝试重命名导入的模块、避免在同一个模块中重复定义变量、函数或类，或者手动重写重复声明。虽然手动重写可能比较麻烦，但是它可以解决所有的重复声明问题，因此应该是最后的选择。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6657fd97d3423812e4db3579