TypeScript编译Web Worker时避免生成export {};的方法

针对你遇到的问题——因使用import type导致Worker被识别为模块，编译后生成export {};引发运行错误，这里提供几个可行的解决方案：

方案1：使用模块类型Worker（推荐，若浏览器支持） #

目前主流现代浏览器（Chrome 80+、Firefox 114+、Edge 80+、Safari 15.4+）已支持模块类型的Web Worker。你可以保留现有的import type导入方式，只需在创建Worker时指定type: 'module'：

// app.ts中创建Worker的代码
const worker = new Worker('./assets/workers/search.worker.js', { type: 'module' });

这种方式无需修改TypeScript配置或类型文件，既能保留类型安全，又符合ES模块规范。

方案2：将共享类型改为全局类型，通过三斜线引用引入 #

如果需要兼容旧浏览器，可以把共享类型改为全局声明，避免使用import type触发模块识别：

1. 修改types.d.ts，移除export，改为全局类型声明：

declare type someType = string | number;

2. 在search.worker.ts中用三斜线引用引入类型文件：

/// <reference path="./types.d.ts" />

// 直接使用someType类型，无需导入
const exampleValue: someType = 123;

// Web Worker逻辑

此时TypeScript不会将Worker文件识别为模块，编译后就不会生成export {};。注意这种方式会让类型变成全局的，要避免命名冲突。

方案3：Post-build脚本移除export {}; #

如果不想修改类型或Worker的加载方式，可以在编译完成后用脚本自动移除多余的导出语句：

1. 编写一个简单的Node.js清理脚本（比如scripts/clean-worker.js）：

const fs = require('fs');
const path = require('path');

// 替换为你的Worker输出文件路径
const workerFilePath = path.join(__dirname, '../assets/workers/search.worker.js');

fs.readFile(workerFilePath, 'utf8', (err, content) => {
  if (err) throw err;
  // 移除末尾的export {};
  const cleanedContent = content.replace(/export {};\s*$/, '');
  fs.writeFile(workerFilePath, cleanedContent, (err) => {
    if (err) throw err;
    console.log('Worker文件已清理多余导出语句');
  });
});

2. 在package.json的scripts中添加编译后执行的命令：

{
  "scripts": {
    "build:worker": "tsc -p tsconfig.worker.json",
    "postbuild:worker": "node scripts/clean-worker.js"
  }
}

执行npm run build:worker时，编译完成后会自动运行清理脚本，移除export {};。

方案4：使用Babel编译Worker（进阶） #

如果项目已经使用Babel，可以配置@babel/plugin-transform-typescript来处理Worker文件，只移除类型导入而不生成模块导出：

1. 安装依赖：

npm install @babel/core @babel/plugin-transform-typescript @babel/preset-env --save-dev

2. 创建Babel配置文件（.babelrc.worker.json）：

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    ["@babel/plugin-transform-typescript", { "onlyRemoveTypeImports": true }]
  ]
}

3. 用Babel编译Worker：

babel src/search.worker.ts --out-file assets/workers/search.worker.js --config-file .babelrc.worker.json

这种方式会保留Worker的脚本模式，同时处理类型导入，不会生成export {};。

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