在前端开发中，Babel 是一种常用的 JavaScript 编译工具，它可以将 ES6+ 代码转换为可以在现代浏览器中运行的 JavaScript 代码。然而，在使用 Babel 编译后的代码中，有时候会出现 $export is not defined 的错误，让开发者十分苦恼。本文将介绍这个问题的原因，并提供解决方案。
问题原因
在 Babel 编译的过程中，它会将代码中的 ES6 的模块化语法 export 和 import 转换为 CommonJS 语法。而在转换的过程中，对于某些情况下的 export 语句，Babel 实际上并没有进行转换，而是将其转换为了 $export，导致在编译后的代码中，会出现 $export is not defined 的错误。
具体来说，这个问题通常出现在使用了 export * 语法时。例如：
export * from 'module';
在 Babel 编译后的代码中，上面的语句将被转换为：
-- -------------------- ---- ------- ---- -------- ------------------------------ ------------- - ------ ---- --- --------------- - ---- -- --- ------- - ------------------ --- -------- - -------------------------------- -------- --------------------------- - ------ --- -- -------------- - --- - - -------- --- -- - ------------------- ------------------
可以看到，在编译后的代码中，出现了一个 $export 的函数调用，而这个函数在当前作用域中是未定义的，导致出现了 $export is not defined 的错误。
解决方案
对于这个问题，有几种解决方案可以选择，以下是其中两种常见的方法。
1. 安装 @babel/plugin-transform-modules-commonjs 插件
一种解决方案是安装 Babel 的 @babel/plugin-transform-modules-commonjs 插件，它可以确保在转换时正确处理 export * 语句，避免出现 $export is not defined 的错误。
首先，需要安装该插件：
npm install @babel/plugin-transform-modules-commonjs --save-dev
然后，在 Babel 的配置文件中，添加该插件：
{
"presets": [
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-transform-modules-commonjs"
]
}重新编译代码后，就可以发现 $export is not defined 错误已经被解决了。
2. 修改 webpack 配置
另一种解决方案是修改 webpack 的配置，在打包时正确设置 output.libraryTarget 属性，使其与 CommonJS 规范对应，从而避免 $export is not defined 的错误。
在 webpack 的配置文件中，可以将 output.libraryTarget 设置为 commonjs2，例如：
output: {
filename: '[name].js',
library: 'MyLib',
libraryTarget: 'commonjs2'
}重新编译代码后，就可以发现 $export is not defined 错误也被解决了。
总结
在 Babel 编译后的代码中出现 $export is not defined 错误，通常是由于 export * 语句被转换为了 $export 函数，而该函数在当前作用域中未定义导致的。为了解决这个问题，可以安装 @babel/plugin-transform-modules-commonjs 插件或者修改 webpack 的配置文件，使用 CommonJS 规范进行打包。这些方法都可以有效地解决 $export is not defined 错误，并确保代码能够正常运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a7b57548841e9894448170
