随着 ES6 的发布，我们可以使用许多新的语言特性来编写更加现代化的 JavaScript 代码。然而，由于浏览器兼容性的问题，我们需要使用 Babel 来将 ES6 代码转换为 ES5 代码。在这个过程中，我们可能会遇到一些关于 export 的问题，本文将会介绍这些问题，并提供解决方法。
问题 1：Babel 无法正确编译 export
我们知道，在 ES6 中，我们可以使用 export 关键字将模块导出。例如：
// module.js export const foo = 'bar';
然而，在使用 Babel 编译时，我们可能会遇到以下错误：
SyntaxError: Unexpected token export
这是因为 Babel 默认只会将 ES6 的语法转换为 ES5 的语法，但是并不会将 export 转换为 CommonJS 或 AMD 规范的语法。
解决方法 1：使用 babel-plugin-transform-es2015-modules-commonjs 插件
为了解决这个问题，我们可以使用 babel-plugin-transform-es2015-modules-commonjs 插件来将 export 转换为 CommonJS 规范的语法。我们可以通过以下命令来安装该插件：
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs
然后，在 .babelrc 文件中添加以下配置：
{
"plugins": [
["transform-es2015-modules-commonjs", {
"strict": true
}]
]
}现在，我们重新编译代码，就可以成功地将 export 转换为 CommonJS 规范的语法了。
问题 2：Babel 编译后的代码无法正确导入模块
在使用 export 导出模块后，我们可能会遇到以下问题：在 Babel 编译后的代码中，模块无法正确导入。例如：
// module.js
export const foo = 'bar';
// app.js
import { foo } from './module';
console.log(foo); // 输出 undefined在这个例子中，我们期望输出 bar，但是却输出了 undefined。
解决方法 2：使用 babel-plugin-transform-es2015-modules-commonjs 插件
这个问题的解决方法和上一个问题类似：我们需要使用 babel-plugin-transform-es2015-modules-commonjs 插件来将 export 转换为 CommonJS 规范的语法。
首先，我们需要在 .babelrc 文件中添加以下配置：
{
"plugins": [
"transform-es2015-modules-commonjs"
]
}然后，在我们的代码中，我们需要使用 require 来导入模块，而不是使用 ES6 的 import。例如：
// app.js
const { foo } = require('./module');
console.log(foo); // 输出 bar现在，我们重新编译代码，就可以成功地导入模块了。
结论
在使用 Babel 编译 ES6 代码时，我们可能会遇到一些关于 export 的问题。这些问题可以通过使用 babel-plugin-transform-es2015-modules-commonjs 插件来解决。我们需要将 export 转换为 CommonJS 规范的语法，然后使用 require 来导入模块。通过这些方法，我们可以成功地将 ES6 代码转换为 ES5 代码，并在现代浏览器中运行我们的应用程序。
示例代码：
// module.js
export const foo = 'bar';
// app.js
const { foo } = require('./module');
console.log(foo); // 输出 bar来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6759559336908a98ca6d8fb9