ES 模块范围内未定义导出

Java

在使用 JavaScript 编写代码时，我们经常会使用模块来组织和管理我们的代码。ES 模块是一种在 JavaScript 中定义和使用模块的标准方法。它提供了一种将代码拆分为多个文件，并在需要时进行导入和导出的方式。然而，在使用 ES 模块时，有时我们可能会遇到一个错误：“模块范围内未定义导出”。这个错误通常发生在我们尝试导出一个未定义的标识符时。

什么是模块范围内未定义导出错误？

当我们使用 ES 模块时，我们可以使用 export 关键字将一个标识符（如变量、函数或类）导出到模块的外部。这样，其他模块就可以使用 import 关键字将这个标识符导入并使用它。然而，如果我们在模块中尝试导出一个未定义的标识符，就会出现“模块范围内未定义导出”错误。

案例代码

假设我们有一个名为 utils.JS 的模块，其中导出了一个名为 add 的函数。然后我们创建一个名为 mAIn.JS 的模块，试图导入并使用 multiply 函数。然而，在 utils.JS 模块中并没有定义 multiply 函数，因此会出现“模块范围内未定义导出”错误。

utils.JS 模块的代码如下所示：

Javascript
export function add(a, b) {
  return a + b;
}

mAIn.JS 模块的代码如下所示：

Javascript
import { multiply } from './utils.JS';
console.log(multiply(2, 3));

运行以上代码时，我们会得到以下错误信息：

Uncaught SyntaxError: The requested module './utils.JS' does not provide an export named 'multiply'

解决方法

要解决“模块范围内未定义导出”错误，我们需要确保我们导出的标识符在模块中是定义过的。在上述的案例中，我们可以通过在 utils.JS 模块中定义 multiply 函数来解决这个问题。修改后的代码如下所示：

Javascript
export function add(a, b) {
  return a + b;
}
export function multiply(a, b) {
  return a * b;
}

现在，当我们运行 mAIn.JS 模块时，不再会出现“模块范围内未定义导出”错误，并且正确地输出了 multiply 函数的结果。

在使用 ES 模块时，如果出现“模块范围内未定义导出”错误，这意味着我们在模块中尝试导出一个未定义的标识符。要解决这个错误，我们需要确保导出的标识符在模块中是定义过的。通过正确导出和导入标识符，我们可以更好地组织和管理我们的代码，并提高代码的可重用性和可维护性。