TypeScript模块配置问题：浏览器报exports/require未定义

问题根源 #

你的tsconfig.json中module设置为commonjs，这是Node.js专用的模块规范，浏览器环境没有require、exports这些全局变量，直接运行编译后的JS文件自然会报错。Parcel能正常运行是因为它把所有模块打包成了浏览器可识别的自包含代码，但你想要的是无需打包直接运行的方案。

核心解决方案：改用浏览器原生支持的ES模块 #

按以下步骤修改配置：

1. 更新tsconfig.json配置
   把模块相关配置改成浏览器兼容的ES模块规范，示例配置如下：

   {
     "target": "ES2020", // 至少ES2015，确保支持ES模块
     "outDir": "./src/js",
     "rootDir": "./src/ts",
     "module": "ESNext", // 输出ES模块格式
     "moduleResolution": "bundler", // 适配浏览器模块解析逻辑
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "skipLibCheck": true,
     "moduleSuffixes": [".ts", ".js"] // 可选，允许导入时省略扩展名
   }
   

2. 配置package.json启用ES模块
   在项目根目录的package.json中添加一行：

   "type": "module"
   

   这会告诉Node.js和浏览器，你的代码使用ES模块规范。

3. 修改HTML中的脚本标签
   在引入编译后JS文件的<script>标签上添加type="module"属性：

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

   浏览器会以ES模块的方式加载这个文件，支持import/export语法。

4. 调整导入路径
   浏览器ES模块要求导入路径必须是完整的相对路径（带./或../）且包含扩展名。在TypeScript文件中导入本地模块时，需要写.js扩展名（TypeScript会自动关联对应的.ts源文件）：

   // 正确写法
   import { myFunc } from './utils.js';
   // 错误写法（浏览器无法识别）
   import { myFunc } from './utils';
   

处理npm包导入问题 #

如果需要导入npm安装的包（比如lodash），直接import会因为浏览器找不到包路径报错，可通过两种方式解决：

• 使用支持ES模块的CDN，直接导入CDN链接：

  import _ from 'https://cdn.skypack.dev/lodash';
  

• 使用轻量开发服务器（如Vite），它会自动处理npm包的模块解析，无需手动打包，修改代码后自动刷新浏览器。

验证方法 #

修改完配置后，重新编译TypeScript代码（tsc命令），然后用浏览器打开HTML文件即可正常运行，无需每次打包。

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