介绍
Babel 是一个 JavaScript 编译器，它可以将 ECMAScript 2015+ 的代码转换成向后兼容的 JavaScript 代码。在前端开发中，我们经常使用 Babel 来编译我们的代码，以确保它可以在不同的浏览器上运行。
然而，在使用 Babel 编译时，我们可能会遇到一些 Import 语法错误。这些错误通常是由于模块加载器的不同而导致的。在本文中，我们将介绍一些解决这些错误的方法。
问题
在 Babel 编译时，我们经常会遇到以下 Import 语法错误：
import foo from './foo.js';
这个错误通常是由于模块加载器的不同而导致的。在浏览器环境中，我们可以使用 <script> 标签来加载模块，而在 Node.js 环境中，我们可以使用 require() 函数来加载模块。然而，在 Babel 编译时，我们需要使用一种通用的方法来加载模块，以确保它可以在不同的环境中都能正常工作。
解决方法
1. 使用 Babel 插件
Babel 提供了一个名为 @babel/plugin-transform-modules-commonjs 的插件，它可以将 ES6 模块转换成 CommonJS 模块。你可以使用以下命令来安装它：
npm install --save-dev @babel/plugin-transform-modules-commonjs
然后，在你的 .babelrc 文件中，添加以下配置：
{
"plugins": [
"@babel/plugin-transform-modules-commonjs"
]
}这样，Babel 将会把你的 ES6 模块转换成 CommonJS 模块，以确保它可以在不同的环境中都能正常工作。
2. 使用 webpack
如果你使用 webpack 来打包你的应用程序，你可以使用 babel-loader 来处理你的 JavaScript 代码。babel-loader 可以自动将 ES6 模块转换成 CommonJS 模块，以确保它可以在不同的环境中都能正常工作。
你可以使用以下命令来安装 babel-loader：
npm install --save-dev babel-loader
然后，在你的 webpack 配置文件中，添加以下配置：
-- -------------------- ---- -------
------- -
------ -
-
----- ----------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-这样，webpack 将会使用 babel-loader 来处理你的 JavaScript 代码，并自动将 ES6 模块转换成 CommonJS 模块。
3. 使用 esm
如果你的应用程序运行在 Node.js 环境中，你可以使用 esm 模块来加载 ES6 模块。esm 模块是一个可以在 Node.js 环境中加载 ES6 模块的工具，它可以让你在 Node.js 中使用 import 和 export 关键字。
你可以使用以下命令来安装 esm 模块：
npm install --save esm
然后，在你的 JavaScript 代码中，添加以下代码：
require = require("esm")(module/*, options*/);
module.exports = require("./main.js");这样，你就可以在 Node.js 中使用 import 和 export 关键字了。
示例代码
以下是一个使用 Babel 编译的示例代码：
// index.js import foo from './foo.js'; console.log(foo);
// foo.js export default 'Hello, world!';
在 Babel 编译时，你可能会遇到以下错误：
SyntaxError: Unexpected token import
为了解决这个错误，你可以使用以上提到的解决方法之一。例如，你可以使用 @babel/plugin-transform-modules-commonjs 插件来将 ES6 模块转换成 CommonJS 模块：
{
"plugins": [
"@babel/plugin-transform-modules-commonjs"
]
}然后，你就可以在浏览器或 Node.js 环境中运行你的代码了。
结论
在 Babel 编译时，我们经常会遇到 Import 语法错误。这些错误通常是由于模块加载器的不同而导致的。为了解决这些错误，我们可以使用 Babel 插件、webpack 或 esm 模块来处理我们的 JavaScript 代码。通过以上解决方法，我们可以确保我们的代码可以在不同的环境中都能正常工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675a6712a630deb01cfefc65