如何在npm包中使用Web Worker？Vite分片上传工具库安装后报错求助

核心原因 #

本地workspace引用时，Vite能直接解析new URL('./worker/preHash.worker.ts', import.meta.url)的相对路径；但库打包发布后，项目结构变化，消费项目无法正确定位Worker文件路径，导致加载失败。

解决步骤 #

1. 改用Vite原生Worker导入语法 #

放弃手动构造URL，使用Vite提供的?worker后缀导入Worker，让Vite自动处理打包和路径映射：

// 替换原有的new URL方式，直接导入Worker类
import PreHashWorker from './worker/preHash.worker?worker'

export function getPreHashWorker(file: File) {
  return createWorkPromise<{ file: File }, { hash: string }>(PreHashWorker, { file })
}

export async function createWorkPromise<Params, Result>(WorkerClass: typeof Worker, params: Params): Promise<Result> {
  return new Promise((resolve, reject) => {
    // 直接实例化导入的Worker类
    const worker = new WorkerClass({
      type: 'module',
    })
    worker.onmessage = (event) => {
      resolve(event.data)
    }
    worker.onerror = (event) => {
      reject(event)
    }
    worker.postMessage(params)
  })
}

2. 调整库的Vite打包配置 #

在slice-upload-utils的vite.config.ts中，确保Worker文件被正确打包为独立产物，并配置输出路径：

import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'

export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'sliceUploadUtils',
      formats: ['es', 'umd'],
      fileName: (format) => `slice-upload-utils.${format}.js`
    },
    rollupOptions: {
      output: {
        // 统一资源输出路径，确保Worker文件能被正确寻址
        assetFileNames: 'assets/[name].[hash][extname]',
        chunkFileNames: 'chunks/[name].[hash].js'
      }
    }
  },
  plugins: [dts()]
})

3. 确保Worker文件被包含在发布包中 #

在库的package.json中添加files字段，明确包含Worker相关文件或打包后的产物：

{
  "files": [
    "dist",
    "src/worker/*.worker.ts"
  ]
}

验证流程 #

1. 重新打包slice-upload-utils：执行pnpm build
2. 发布包（或本地link测试）
3. 在消费项目中执行pnpm install slice-upload-utils
4. 测试大文件分片上传功能，确认Worker正常运行

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