配置TypeScript编译消除require()，解决浏览器ReferenceError报错

问题根源 #

你当前tsconfig.json里module设为commonjs，这是Node.js专用的模块规范，浏览器根本不认识require语法，所以抛出引用错误。TS默认只做语法转译和类型检查，不会自动把依赖文件合并到输出结果里，只会保留模块引用关系。

解决方案一：生成浏览器原生支持的ES模块 #

直接修改tsconfig.json配置，让TS输出浏览器能识别的ES模块语法：

{
  "compilerOptions": {
    "target": "ES2020", // 可根据浏览器兼容需求调整为更低版本（如ES6）
    "module": "ESNext", // 输出浏览器原生支持的import/export语法
    "moduleResolution": "node", // 沿用Node.js的模块解析规则
    "outDir": "./dist", // 指定编译后JS文件的输出目录
    "strict": true, // 可选，开启严格类型检查
    "esModuleInterop": true // 可选，优化CommonJS模块的导入兼容
  },
  "include": ["src/**/*"] // 替换为你的TS文件所在目录
}

编译完成后，在HTML中引入JS文件时必须加上type="module"属性，告知浏览器这是ES模块：

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

解决方案二：打包成单文件（无需模块标签） #

如果不想在HTML中使用type="module"，可以用打包工具把所有依赖合并成一个独立的JS文件。以Webpack为例，简单配置步骤：

1. 安装依赖：npm install webpack webpack-cli ts-loader typescript --save-dev
2. 新建webpack.config.js文件：

module.exports = {
  entry: "./src/app.ts", // 你的TS入口文件路径
  output: {
    filename: "bundle.js", // 打包后的文件名
    path: __dirname + "/dist" // 打包文件的输出目录
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [".ts", ".js"]
  }
};

3. 保持tsconfig.json的module为ESNext或CommonJS，运行npx webpack执行打包，最后在HTML中引入dist/bundle.js即可。

为什么之前的修改无效？ #

你调整target为es5和开启esModuleInterop，只是改变了JS语法版本和模块互操作性规则，没有解决核心问题——commonjs模块的require语法本就不是浏览器原生支持的。

内容的提问来源于stack exchange，提问作者Thomas W.