在现代前端开发中，ES6 已经成为了主流的编写 JavaScript 代码的方式，它引入了一系列非常实用的语法和新特性，比如箭头函数、类、模板字符串等。然而，当我们想要使用 ES6 中的 import/export 语法时，可能会遇到一些问题，因为有些浏览器不支持这个语法，而 Babel 作为 ES6 转换工具，在默认情况下也无法解析这个语法。
如果你正在遇到这样的问题，本文将为你提供解决方法。
什么是 import/export 语法？
在 ES6 中，我们可以使用 import/export 语法来实现模块化编程。这个语法允许我们将一个模块中的内容导出，并在另一个模块中引入这些内容。比如，我们可以将一个包含公共函数的模块导出，然后在其他模块中使用它：
// javascriptcn.com 代码示例
// export.js
export function add(a, b) {
return a + b;
}
// import.js
import { add } from './export.js';
console.log(add(1, 2)); // 输出 3为什么 Babel 无法识别 import/export 语法？
Babel 默认情况下无法识别 import/export 语法，是因为它只能将 ES6 代码转换为 ES5 代码，而 import/export 语法并不是 ES5 中的标准语法，它需要在浏览器中使用特定的模块加载器来实现。因此，Babel 需要使用一个插件来将 import/export 语法转换为 CommonJS 或者 AMD 等其他模块系统可识别的语法。
如何解决这个问题？
我们可以安装并配置一个 babel-plugin-transform-es2015-modules-commonjs 插件来解决这个问题。这个插件会将所有的 import/export 语法转换为 CommonJS 的 require/module.exports 语法，从而使我们的代码可以在大多数浏览器中正常运行。
// 安装插件 npm install --save-dev babel-plugin-transform-es2015-modules-commonjs
然后在 .babelrc 文件中添加这个插件：
{
"plugins": ["transform-es2015-modules-commonjs"]
}最后，我们就可以使用 import/export 语法了，Babel 会在转换代码的时候自动将它们转换为 CommonJS 语法。
示例代码
以下是一个完整的示例代码，它包含了一个 export.js 模块和一个 import.js 模块。我们可以通过在 import.js 模块中使用 import/export 语法来引入 export.js 模块中的 add 函数，并在控制台中输出它的结果。
// javascriptcn.com 代码示例
// export.js
export function add(a, b) {
return a + b;
}
// import.js
import { add } from './export.js';
console.log(add(1, 2)); // 输出 3总结
本文介绍了在使用 ES6 import/export 语法时，Babel 无法识别的问题，并提供了一个插件来解决这个问题。我们需要先安装 babel-plugin-transform-es2015-modules-commonjs 插件，然后在 .babelrc 文件中配置这个插件。通过这样的方式，我们就可以愉快地使用 ES6 中的 import/export 语法了。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652bed1a7d4982a6ebdc919b