如何用esbuild移除module.exports以避免浏览器‘module未定义’错误

方案1：通过esbuild参数将模块暴露到全局 #

使用--global-name配合--bundle参数，让打包后的代码将类挂载为全局变量，同时消除CommonJS相关的module变量问题：

esbuild lib/my-formatter.js --minify --bundle --global-name=MyFormatter --outfile=web/my-formatter.min.js

执行该命令后，MyFormatter会成为浏览器全局作用域的变量，你可以在script.js中直接调用new MyFormatter()，且不会出现module is not defined错误。

方案2：修改原代码，兼容Node.js和浏览器环境 #

在原类文件末尾添加环境判断，同时支持CommonJS导出和浏览器全局挂载：

class MyFormatter {
  formatText(str){
    return 'foo ' + str
  }
}

// 兼容Node.js测试和浏览器使用
if (typeof module !== 'undefined' && module.exports) {
  module.exports = MyFormatter;
} else {
  window.MyFormatter = MyFormatter;
}

之后直接用你最初的esbuild命令（无需--bundle）打包即可：

esbuild lib/my-formatter.js --minify --outfile=web/my-formatter.min.js

这样既不影响Jest的测试流程，浏览器中也能正常访问全局的MyFormatter。

方案3：改用ES模块规范重构代码 #

将原代码改为ES模块格式：

export default class MyFormatter {
  formatText(str){
    return 'foo ' + str
  }
}

Jest现在原生支持ES模块（可通过在package.json中添加"type": "module"，或在jest.config.js中配置相关选项适配）。之后用esbuild打包时指定输出格式为IIFE并绑定全局变量：

esbuild lib/my-formatter.js --minify --bundle --format=iife --global-name=MyFormatter --outfile=web/my-formatter.min.js

这种方式更贴合现代前端的模块标准。

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