在 JavaScript 的新标准 ES6 中，我们可以使用 import 和 export 语法来引入和导出模块，但是在使用 Babel 编译器编译代码时，却发现这些语法不能被正确编译，导致代码无法运行。那么这是什么问题，该如何解决呢？本文将会详细讲解这个问题，并且给出解决方案和示例代码。
问题分析
首先，我们需要了解的是 import 和 export 语法并不是 JavaScript 标准的一部分，而是 ES6 新增的语法特性。因此，许多老版浏览器和 Node 环境并不支持这些语法。
为了让我们的代码在这些不支持新语法的环境中也能正常运行，我们需要使用 Babel 编译器将 ES6 语法转换为 ES5 语法，这样就能在不支持新语法的环境中运行了。但是，当我们使用 Babel 编译器时，却发现它并不能正确编译 import 和 export 语法，那么问题到底出在哪里呢？
在 Babel 编译器的早期版本中，它并没有实现 import 和 export 语法的编译，因为当时 import 和 export 还只是 ECMAScript 草案中的一部分，还没有正式成为标准，所以并没有被广泛采用。然而随着 ES6 的正式发布，import 和 export 语法已经被大量应用于实际项目中，Babel 编译器也逐渐加入了对这些语法的编译支持。但是，这些语法仍然需要依靠插件的支持才能正确编译。
解决方案
要解决 Babel 不能编译 import 和 export 语法的问题，我们需要安装相应的插件来实现它的编译。我们可以使用 @babel/plugin-transform-modules-commonjs 插件来将 import 和 export 语法转换为 CommonJS 模块方案。
以下是安装和配置该插件的步骤：
- 安装
@babel/plugin-transform-modules-commonjs插件：
npm install --save-dev @babel/plugin-transform-modules-commonjs
- 在
.babelrc配置文件中添加该插件：
{
"plugins": ["@babel/plugin-transform-modules-commonjs"]
}现在，我们已经成功安装和配置了相应的插件，可以使用 import 和 export 语法了。下面是一个使用了 import 和 export 语法的示例代码：
import { add } from "./utils";
function sum(a, b) {
return add(a, b);
}
export { sum };这段代码导出了一个 sum 函数，并使用 import 引入了另一个模块的 add 函数。我们可以使用 Babel 编译器将这段代码转换为 ES5 语法，如下所示：
-- -------------------- ---- ------- ---- -------- --- ------ - ------------------- -------- ------ -- - ------ --- -------------- --- - -------------- - - ---- --- --
现在，我们已经可以在不支持 ES6 语法的环境中运行这段代码了！
总结
在使用 Babel 编译器编译 ES6 代码时，我们可能会遇到 import 和 export 语法不能被正确编译的问题。这是因为这些语法并不是 JavaScript 标准的一部分，需要借助插件的支持才能正确编译。我们可以使用 @babel/plugin-transform-modules-commonjs 插件来将 import 和 export 语法转换为 CommonJS 模块方案，解决这个问题。同时，这也提醒我们，在使用新特性时，需要注意是否需要借助插件支持才能正确编译。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd5f3295b1f8cacdcd3b68