使用Bun运行TypeScript文件时出现ReferenceError: window未定义求助

你遇到的核心问题是：bun run index.ts默认在Node.js兼容环境执行代码，而浏览器特有的window对象在这个环境中不存在。TypeScript编译不报错是因为添加dom库仅做类型检查，不会在运行时提供浏览器环境API。

正确解决方案：打包浏览器端代码并运行 #

你的代码面向浏览器，应该用Bun的构建工具将代码打包成浏览器可执行文件，而非直接用bun run执行。

1. 创建构建配置文件
   在项目根目录新建build.js，写入以下内容：

await Bun.build({
  entrypoints: ['./index.ts'],
  outdir: './dist',
  target: 'browser', // 明确指定构建目标为浏览器环境
  sourcemap: true, // 可选，生成sourcemap方便调试
});

2. 执行构建命令
   运行以下命令完成代码打包：

bun run build.js

执行后会在项目根目录生成dist文件夹，里面包含打包好的浏览器可执行代码。

3. 在浏览器中运行代码
   新建index.html文件，引入打包后的JS文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Web App Test</title>
</head>
<body>
  <script src="./dist/index.js"></script>
</body>
</html>

你可以直接用浏览器打开这个HTML文件，或者用Bun的开发服务器启动：

bun dev index.html

为什么之前的尝试无效？ #

• bun run index.ts本质是在Bun的Node兼容环境中执行脚本，这个环境没有window、document等浏览器API，因此报错。
• tsconfig.json中添加lib: ["dom"]仅让TypeScript编译器识别浏览器相关类型，不会改变代码的运行环境，无法解决运行时的window未定义问题。

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