Babel报错Uncaught ReferenceError: exports is not defined及ES6模块适配疑问

首先，不是必须用Webpack这类打包工具才能让代码在浏览器运行，但你的当前配置确实没处理好ES模块的加载逻辑，导致浏览器报错。

为什么浏览器会报错？ #

Babel默认只会把ES6+的语法（比如箭头函数、let/const）转译为ES5，但不会处理import/export这类模块语法——它只是把这些语法保留下来，而很多旧浏览器（甚至部分现代浏览器在非特定场景下）无法直接识别原生ES模块的加载方式，再加上你可能没按浏览器要求的方式引用脚本，自然会报错。

两种解决思路 #

思路1：不用打包工具，靠浏览器原生ES模块支持 #

如果你的目标浏览器是Chrome 61+、Firefox 60+这类现代浏览器，可以这样调整：

• 在HTML里引用脚本时，必须加上type="module"属性：

  <script type="module" src="./path/to/your-transpiled-file.js"></script>
  

• 检查Babel配置文件（.babelrc或babel.config.json），不要引入@babel/plugin-transform-modules-commonjs这类会把import/export转成CommonJS语法的插件，让Babel保留原生模块语法。
• 注意文件路径：原生ES模块要求引用路径必须完整（比如要加.js后缀，不能省略），相对路径也要写正确。

思路2：使用打包工具（Webpack/Rollup等） #

如果需要兼容旧浏览器，或者项目依赖关系复杂（比如用到很多第三方模块），打包工具是更稳妥的选择：

• 打包工具会把所有分散的模块合并成浏览器能直接识别的文件，同时自动处理依赖树、代码拆分等问题，不会留下浏览器看不懂的import/export语法。
• 配合Babel使用时，让Babel专注于语法转译，模块整合交给打包工具处理，流程更顺畅。

关于WebStorm文件监视器的补充 #

你的文件监视器只完成了Babel转译和代码压缩，但没处理模块的整合或浏览器适配逻辑，转译后的文件里依然保留着import/export，浏览器自然解析不了。可以结合上面的两种思路，调整监视器的配置或者补充其他流程。

内容的提问来源于stack exchange，提问作者Marian Potoroaca