如何在浏览器中运行纯TypeScript项目？解决exports未定义报错

这个错误的核心原因很明确：你现在的配置是让TypeScript编译出CommonJS模块（tsconfig.json里module设为commonjs），但却在浏览器里用ES模块的方式（<script type="module">）去加载它——而浏览器原生根本不支持CommonJS的exports语法，自然就报错了。

下面给你两种可行的解决方案，按需选择：

方案一：将TypeScript编译为浏览器支持的ES模块 #

这是最直接的修改方式，不需要额外工具，调整tsconfig.json即可：

1. 修改tsconfig.json的模块相关配置：

{
  "compilerOptions": {
    "target": "ES6",          // 编译到ES6+，适配现代浏览器
    "module": "ESNext",       // 生成ES模块原生的import/export语法
    "moduleResolution": "Bundler", // 采用打包器风格的模块解析，适配浏览器环境
    "lib": ["dom", "es2015"], // 简化lib配置，es2015已包含基础ES特性
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["**/*.ts"]      // 确保项目中所有TS文件都被编译
}

2. 检查HTML中的脚本路径
   你的index.html里用了../dist/index.js，要确认这个相对路径是否正确。比如如果index.html在项目根目录，路径应该改成./dist/index.js；如果index.html在子文件夹（比如src/html），那../dist/index.js是对的——可以打开浏览器开发者工具的网络面板，查看是否成功加载了index.js，如果出现404就调整路径。

3. 重新编译并测试
   运行tsc重新生成dist目录下的文件，再用Go Live打开页面，应该就能正常运行了。

方案二：用打包工具处理CommonJS模块（适合依赖CommonJS包的场景） #

如果你因为某些原因必须保留module: "commonjs"（比如项目依赖了只能用CommonJS的第三方包），那需要用打包工具（比如Vite、Webpack）把CommonJS模块转换成浏览器能识别的代码。这里用Vite举个简单的例子：

1. 初始化Vite TypeScript项目：

npm create vite@latest my-ts-project -- --template vanilla-ts

2. 把你的现有代码（index.ts、app/BoardUI.ts）复制到Vite项目的src目录下

3. 安装依赖并启动开发服务：

cd my-ts-project
npm install
npm run dev

Vite会自动处理CommonJS和ES模块的互操作，直接在浏览器里运行就不会有报错了。

额外注意点 #

• 浏览器原生只支持ES模块（import/export），不支持CommonJS的require/exports，所以直接在<script type="module">里加载CommonJS编译的文件肯定会报错。
• esModuleInterop选项是帮助Node.js或打包工具处理CommonJS与ES模块的互操作，但在浏览器原生环境下这个选项不起作用。

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