TypeScript+React+Vite嵌套项目配置报错及构建产物异常求助

问题描述 #

1. ServiceWorker导入src模块的TS编译错误 #

项目结构：

.
├── tsconfig.json
├── src/
│   └── constants/config.ts
└── public/
    ├── serviceWorker.ts
    └── tsconfig.worker.json

在public/serviceWorker.ts中导入src/constants/config.ts时，触发TS错误：

File '<path>/src/constants/config.ts' is not listed within the file list of project '<path>/public/tsconfig.worker.json'. Projects must list all files or use an 'include' pattern.

2. 构建产物包含多余文件 #

执行"build": "tsc && vite build"后，dist目录中意外出现serviceWorker.ts和tsconfig.worker.json：

.
└── dist/
    ├── assets/
    ├── serviceWorker.ts
    └── tsconfig.worker.json

当前TS配置文件：

根目录tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "useDefineForClassFields": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "esModuleInterop": true,
    "skipLibCheck": true,

    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src", "svg.d.ts", "public/serviceWorker.ts"],
  "references": [
    { "path": "./tsconfig.node.json" },
    { "path": "./public/tsconfig.worker.json" }
  ]
}

public/tsconfig.worker.json

{
  "compilerOptions": {
    "rootDir": "../",
    "composite": true,
    "module": "es2022",
    "noEmit": false,
    "moduleResolution": "bundler",
    "lib": ["WebWorker", "ES2022"]
  }
}

解决方案 #

解决TS编译错误 #

核心原因是public/tsconfig.worker.json未包含src目录文件，导致TS无法识别ServiceWorker对src模块的依赖。调整配置如下：

1. 修改public/tsconfig.worker.json，添加include字段覆盖所需文件：

{
  "compilerOptions": {
    "rootDir": "../",
    "composite": true,
    "module": "es2022",
    "noEmit": false,
    "moduleResolution": "bundler",
    "lib": ["WebWorker", "ES2022"]
  },
  "include": ["../src/**/*", "./serviceWorker.ts"],
  "exclude": ["../node_modules"]
}

2. 根目录tsconfig.json中移除public/serviceWorker.ts的include配置，避免重复编译：

{
  // 其他配置不变
  "include": ["src", "svg.d.ts"],
  "references": [
    { "path": "./tsconfig.node.json" },
    { "path": "./public/tsconfig.worker.json" }
  ]
}

解决构建产物冗余问题 #

Vite默认会完整复制public目录下的所有文件到dist，可通过两种方式解决：

方式1：调整文件结构（推荐）

• 将public/serviceWorker.ts移到src目录（比如src/service-worker/serviceWorker.ts），作为源码由Vite编译处理，而非静态资源复制。
• 将public/tsconfig.worker.json移到根目录，命名为tsconfig.worker.json，同时更新根目录tsconfig.json的references路径：

{
  // 其他配置不变
  "references": [
    { "path": "./tsconfig.node.json" },
    { "path": "./tsconfig.worker.json" }
  ]
}

方式2：配置Vite排除文件

如果不想移动文件，在vite.config.ts中添加排除规则：

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

export default defineConfig({
  plugins: [react()],
  publicDir: {
    name: 'public',
    exclude: ['serviceWorker.ts', 'tsconfig.worker.json']
  }
});

另外，可优化构建命令为"build": "tsc --noEmit && vite build"，避免tsc生成不必要的输出文件；若Vite已配置类型检查，也可简化为"build": "vite build"。

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