TypeScript导出导入示例报错：require、exports未定义求助

嘿，我初学TypeScript模块系统的时候也踩过一模一样的坑！浏览器环境本身不支持CommonJS的require和exports语法，而TypeScript默认会把代码编译成CommonJS模块格式，这就是你接连报错的核心原因。给你几个可行的解决思路：

方法一：配合RequireJS调整TypeScript编译配置 #

RequireJS基于AMD模块规范工作，所以我们需要让TypeScript把代码编译成AMD格式来适配它：

1. 修改你的tsconfig.json配置文件，将模块系统设置为amd：

{
  "compilerOptions": {
    "module": "amd",
    "target": "ES5", // 保证兼容多数主流浏览器
    "outDir": "./dist", // 指定编译后文件的输出目录
    "strict": true
  },
  "include": ["./src/**/*"] // 要编译的TS文件范围
}

2. 正确在HTML中引入RequireJS和编译后的代码：
   推荐用data-main属性指定入口文件，RequireJS会自动加载它：

<script src="require.min.js" data-main="./dist/main.js"></script>

也可以手动加载模块：

<script src="require.min.js"></script>
<script>
  // 加载你的入口模块
  require(['./dist/main'], function(mainModule) {
    // 这里可以调用模块导出的功能
  });
</script>

3. 确保TS代码的导出导入写法符合规范：
   导出示例（src/utils.ts）：

export const greet = (name: string) => `Hello, ${name}!`;

导入示例（src/main.ts）：

import { greet } from './utils';
console.log(greet('Jeb50'));

方法二：使用现代打包工具（更推荐） #

如果不想折腾RequireJS的配置，直接用Webpack、Vite或者Rollup这类打包工具会省心很多——它们能自动处理TypeScript模块的浏览器兼容问题，把所有代码打包成浏览器可直接运行的文件：

• 举个Vite的例子，几步就能搞定：
  1. 初始化项目：npm create vite@latest my-ts-project -- --template vanilla-ts
  2. 进入目录安装依赖：cd my-ts-project && npm install
  3. 启动开发服务器：npm run dev
     之后你就可以正常写TS的导出导入，Vite会帮你搞定所有兼容细节，还支持热更新，开发体验拉满。

为什么之前的尝试没解决？ #

大概率是你装了RequireJS，但没调整TypeScript的编译模块格式——编译出来的代码还是CommonJS风格的exports，而RequireJS只识别AMD的模块定义，所以才会继续报错。

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