Next.js项目中如何将.ts文件编译为.js以用作Web Worker？

不建议直接用tsc单独编译 #

直接调用tsc编译worker.ts不是最优解，因为Next.js本身有完整的构建链路，单独编译会和项目的tsconfig.json、输出路径规则脱节，还没法和dev/build流程联动，容易出现路径错误、环境不匹配的问题。

推荐两种正确实现方式 #

方式一：用Next.js原生Web Worker支持（首选） #

Next.js 12及以上版本已经内置了Web Worker的编译支持，不需要手动处理编译步骤：

1. 把你的worker.ts放在项目任意目录（比如src/workers/worker.ts）
2. 在主代码中通过web-worker模块导入并实例化：

import Worker from 'web-worker';

const worker = new Worker(new URL('../workers/worker.ts', import.meta.url));

3. 这样不管是开发（next dev）还是生产构建（next build），Next.js都会自动把worker.ts编译成适配的worker文件，完全复用项目根目录的tsconfig.json配置，无需额外修改scripts。

方式二：手动配置编译（适合自定义需求） #

如果需要对worker的编译规则做特殊定制，可以单独配置编译流程：

1. 创建单独的worker ts配置文件

在项目根目录新建tsconfig.worker.json，适配Web Worker的运行环境：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "WebWorker"],
    "outDir": "./public/workers", // 输出到public目录，保证Worker能加载到静态资源
    "strict": true,
    "moduleResolution": "Node",
    "skipLibCheck": true
  },
  "include": ["src/workers/**/*.ts"]
}

2. 更新package.json的scripts

把worker编译和现有dev/build流程绑定：

"scripts": {
  "dev": "npm run build:worker && next dev",
  "build": "npm run build:worker && next build",
  "start": "next start",
  "lint": "next lint",
  "build:worker": "tsc --project tsconfig.worker.json",
  "watch:worker": "tsc --project tsconfig.worker.json --watch"
}

• build:worker：一次性编译所有worker文件到指定输出目录
• 开发时可以单独开终端执行npm run watch:worker，监听worker文件变化自动重编译；如果想和next dev并行执行，先安装concurrently（npm install -D concurrently），然后把dev脚本改成：

  "dev": "concurrently \"npm run watch:worker\" \"next dev\""
  

3. 在代码中引用编译后的Worker

因为输出到public/workers目录，所以实例化路径是：

const worker = new Worker('/workers/worker.js');

关键注意事项 #

• Worker线程是独立环境，不能使用Next.js的专属API（比如路由、SSR相关方法），也无法访问DOM
• 手动编译时，输出目录必须放在public下，否则Web Worker会因为跨域或资源找不到报错
• 手动编译的worker会使用单独的tsconfig.worker.json，和项目主tsconfig的配置相互独立

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