在前端开发中，我们经常使用 ES6 语法来编写代码。但是，由于不同浏览器的支持程度不同，我们需要使用 Babel 将 ES6 代码转换成 ES5 代码，以便在所有浏览器中运行。在使用 Babel 编译 ES6 代码时，有时会遇到 "import not found: 'xxx'" 的错误。那么这个错误是什么意思？我们该如何解决它呢？
错误原因
"import not found: 'xxx'" 的错误通常是由于路径问题引起的。当我们在 ES6 模块中使用 import 语句引入其他模块时，Babel 无法正确地解析模块路径，导致找不到模块，从而出现错误。
解决方法
1. 检查路径
首先，我们需要检查 import 语句中引入模块的路径是否正确。如果路径不正确，Babel 就无法找到模块，从而出现错误。在检查路径时，我们需要注意以下几点：
- 路径是否正确：确保路径是正确的，并且文件名的大小写是否正确。
- 相对路径和绝对路径：如果我们使用相对路径引入模块，需要确保相对路径是正确的。如果使用绝对路径引入模块，则需要确保路径是完整的。
- 模块是否存在：确保引入的模块存在，且路径是正确的。
2. 配置 Babel
如果路径没有问题，我们需要检查 Babel 的配置是否正确。我们可以在 .babelrc 文件中设置 Babel 的配置。在配置 Babel 时，我们需要确保以下几点：
- 设置 presets：确保设置了需要使用的 presets，以便 Babel 可以正确地转换 ES6 代码。
- 设置 plugins：有时我们需要使用一些特定的插件来处理某些特定的语法，确保设置了需要使用的插件。
- 配置路径：如果我们使用了一些特定的插件或 presets，需要确保路径是正确的。
以下是一个 .babelrc 文件的示例：
{
"presets": [
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-transform-runtime"
]
}3. 安装依赖
如果以上两种方法都没有解决问题，我们需要检查是否安装了正确的依赖。在使用 Babel 编译 ES6 代码时，我们需要安装以下依赖：
- @babel/core：Babel 的核心模块。
- @babel/preset-env：用于转换 ES6 代码的 preset。
- @babel/cli：用于在命令行中使用 Babel。
- @babel/plugin-transform-runtime：用于转换 ES6 的新 API。
如果缺少以上依赖，我们需要安装它们以确保 Babel 可以正常工作。
示例代码
假设我们有以下两个文件：
// src/utils.js
export function add(a, b) {
return a + b;
}// src/index.js
import { add } from './utils';
console.log(add(1, 2));当我们使用 Babel 编译 index.js 文件时，可能会遇到 "import not found: './utils'" 的错误。这时，我们需要检查路径是否正确，并确保在 .babelrc 文件中设置了正确的 presets 和 plugins。以下是一个 .babelrc 文件的示例：
{
"presets": [
"@babel/preset-env"
],
"plugins": []
}在确保路径和配置正确后，我们可以使用以下命令来编译 index.js 文件：
npx babel src/index.js --out-file dist/index.js
这个命令将会把 src/index.js 文件编译成 ES5 代码，并输出到 dist/index.js 文件中。如果一切正常，我们应该可以在浏览器中运行 dist/index.js 文件，并看到正确的输出结果。
总结
"import not found: 'xxx'" 的错误通常是由于路径问题引起的。当我们遇到这个错误时，需要检查路径是否正确，并确保 .babelrc 文件中设置了正确的 presets 和 plugins。如果还是无法解决问题，我们需要检查是否安装了正确的依赖。通过以上方法，我们可以解决 "import not found: 'xxx'" 的错误，并正确地使用 Babel 编译 ES6 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650979a195b1f8cacd431e42