在 ES10 中，我们可以使用大括号来导入模块中的特定变量或函数。然而，在使用大括号时，我们需要注意一些细节，否则可能会导致 import 路径错误的问题。
问题描述
假设我们有一个名为 utils.js 的模块，其中定义了一个名为 add 的函数：
// utils.js
export function add(a, b) {
return a + b;
}现在，我们想要在另一个模块中使用 add 函数，我们可以使用以下代码：
// app.js
import { add } from './utils.js';
console.log(add(1, 2)); // 输出 3这段代码看起来很简单，但是如果我们不小心记住了大括号中的关键字，就会导致 import 路径错误的问题。例如，下面这段代码：
// 错误的代码 import add from './utils.js'; console.log(add(1, 2)); // 报错：add is not a function
在这段代码中，我们漏掉了大括号，导致 add 变成了默认导出的对象，而不是我们想要的函数。因此，调用 add 函数会导致错误。
这个问题看起来很简单，但是在实际开发中，由于疏忽或者团队协作等原因，很容易出现这种错误。所以，我们需要一些方法来避免这个问题。
解决方法
为了避免 import 路径错误的问题，我们可以采用以下方法：
方法一：使用编辑器插件
很多编辑器都有插件来帮助我们检查 import 语句中的错误。例如，VS Code 中有一个名为 ESLint 的插件，可以检查 import 语句中的语法错误，并给出提示。
在使用 ESLint 插件时，我们需要在项目根目录下创建一个 .eslintrc 文件，并添加以下配置：
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:import/warnings"
]
}这个配置会启用 import 相关的检查规则，从而帮助我们避免 import 路径错误的问题。
方法二：使用默认导出
如果我们不想使用大括号来导入模块中的特定变量或函数，可以考虑使用默认导出。例如，我们可以将 utils.js 中的 add 函数改为默认导出：
// utils.js
export default function add(a, b) {
return a + b;
}然后，在 app.js 中，我们可以使用以下代码来导入 add 函数：
// app.js import add from './utils.js'; console.log(add(1, 2)); // 输出 3
这样，我们就不需要使用大括号来导入 add 函数了，也就避免了 import 路径错误的问题。
总结
在 ES10 中，使用大括号来导入模块中的特定变量或函数是很常见的做法。然而，如果我们不小心记住了大括号中的关键字，就会导致 import 路径错误的问题。为了避免这个问题，我们可以使用编辑器插件来检查 import 语句中的错误，或者使用默认导出来避免使用大括号。希望这篇文章能够帮助你解决 import 路径错误的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65813d94d2f5e1655dc6ed6d