Vite构建React+TypeScript项目时service-worker.ts未被打包如何解决？

问题根因 #

Vite 生产构建阶段只会扫描并处理显式引入到项目依赖链路中的资源，你在 index.html 内联脚本中硬编码的 src/web-worker/service-worker.ts 不在 Vite 的构建扫描范围内，所以不会被编译为可执行的 JS 产物，也不会自动替换路径。
开发环境能正常运行是因为 Vite 开发服务器支持按需编译，收到对该 TS 文件的请求时会实时转译为 JS 返回，不会做预构建校验。

解决步骤 #

步骤1：修改 Vite 配置，指定 Worker 为模块类型 #

在项目根目录的 vite.config.ts 中添加 worker 配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  // 配置Worker为模块类型，匹配你的注册参数
  worker: {
    type: 'module'
  }
})

步骤2：调整 Service Worker 注册逻辑 #

删掉 index.html 中内联的 Service Worker 注册代码，将注册逻辑移到 src/main.tsx 中，通过 Vite 原生的 Worker 导入语法获取编译后的产物路径：

// src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
// 加?worker&url后缀，Vite会单独将该文件作为Worker入口打包，返回产物的URL
import ServiceWorkerURL from './web-worker/service-worker.ts?worker&url'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

if ('serviceWorker' in navigator) {
  (async () => {
    await navigator.serviceWorker.register(ServiceWorkerURL, { type: 'module' })
    console.log("Service worker registered")
  })()
}

步骤3：验证构建结果 #

执行生产构建后，检查 dist 目录会生成带哈希值的 Service Worker JS 产物，页面注册时使用的路径也会自动替换为对应的产物路径，功能正常运行。

现有 src/web-worker/service-worker.ts 和对应目录下的 tsconfig.json 无需修改，可直接保留使用。

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