TypeScript使用require在浏览器加载模块报未定义错误如何解决

require 是Node.js专属的CommonJS模块加载语法，原生浏览器环境没有内置该API，所以直接在HTML中加载编译后的JS文件会抛出未定义错误。编译阶段未报错是因为你的tsconfig开启了esModuleInterop配置，TypeScript静态检查时兼容了CommonJS语法，但你当前配置的输出模块标准为ES2015（ES模块规范），本身也不兼容CommonJS的require写法，运行时自然会出错。

方案1：无打包工具，直接使用浏览器原生ES模块 #

• 第一步：替换TS文件中的导入语法，把所有require写法替换为ES模块标准的import语法：

  // 替换前
  // const Papa = require("papaparse");
  // 替换后
  import Papa from 'papaparse'
  // 其余vega-lite、tabulator-tables的导入也按相同格式修改
  

• 第二步：在public/index.html的<head>标签中添加导入映射，让浏览器能正确识别第三方包的加载地址，你可以把地址替换为本地node_modules中对应包的ES模块入口路径，也可以用公共CDN的ES模块版本：

  <script type="importmap">
  {
    "imports": {
      "papaparse": "./node_modules/papaparse/papaparse.min.js",
      "vega-lite": "./node_modules/vega-lite/build/vega-lite.min.js",
      "tabulator-tables": "./node_modules/tabulator-tables/dist/js/tabulator.min.js"
    }
  }
  </script>
  

• 第三步：在HTML中引入你编译后的index.js时，必须添加type="module"属性，声明该文件为ES模块：

  <script type="module" src="index.js"></script>
  

方案2：使用打包工具处理依赖（更适合多依赖的前端项目） #

如果不想手动处理导入映射，希望直接调用本地node_modules里的依赖，可以用轻量打包工具Vite处理：

1. 执行安装命令：npm install -D vite
2. 在package.json的scripts字段中添加两条命令：

   "dev": "vite public",
   "build": "tsc && vite build public"
   

3. 开发时执行npm run dev即可启动本地服务，Vite会自动处理模块加载、依赖打包，无需额外配置。

你当前的tsconfig.json配置无需大幅修改，保持现有配置即可正常编译ES模块语法的TS代码。

内容的提问来源于stack exchange，提问作者Noam I.