使用Babel转译ES模块后浏览器出现exports未定义错误

问题原因 #

@babel/preset-env默认只负责转译ES6+语法（比如箭头函数、解构赋值），但不会转换CommonJS模块语法（exports/module.exports）。浏览器原生不支持CommonJS的模块系统，直接引入转译后的文件自然会抛出这个错误。

解决方案 #

方案1：输出UMD兼容格式

修改Babel配置文件（babel.config.json或.babelrc），指定输出UMD格式，让转译后的文件同时兼容浏览器和Node.js环境：

{
  "presets": [
    ["@babel/preset-env", {
      "modules": "umd"
    }]
  ]
}

重新执行npm run build，之后在HTML里引入math.js，就能通过全局变量访问factorial函数（比如window.MathModule.factorial，具体全局变量名由你的导出逻辑决定）。

方案2：用ES模块配合HTML的type="module"

如果目标浏览器是现代浏览器（基本都支持ES模块），可以保留ES模块语法，通过模块方式引入：

1. 修改Babel配置，禁用模块转换（保留import/export）：

{
  "presets": [
    ["@babel/preset-env", {
      "modules": false
    }]
  ]
}

2. 在HTML中引入脚本时添加type="module"属性：

<script type="module" src="./dist/math.js"></script>

要是需要在其他脚本里调用factorial，也要用import语法，并且把对应脚本也标记为type="module"。

方案3：用打包工具处理模块

如果项目规模较大，建议用Webpack、Rollup这类打包工具，它们会自动处理模块依赖，把代码打包成浏览器能直接识别的单文件。配置好入口文件后，打包产物直接引入HTML即可正常运行。

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