TypeScript多目录配置不同tsconfig模块类型编译方案咨询

针对你的项目结构，最清晰可靠的方式是使用多TypeScript配置文件，分别为/src/vscode和/src/webview指定不同的模块编译规则，具体步骤如下：

1. 创建基础配置文件 #

在项目根目录新建tsconfig.base.json，存放通用编译配置（避免重复编写）：

{
  "compilerOptions": {
    "target": "ES2020",
    "strict": true,
    "declaration": true,
    "sourceMap": true,
    "skipLibCheck": true
  },
  "exclude": ["node_modules", "out"]
}

2. 为vscode目录创建专属配置 #

新建tsconfig.vscode.json，继承基础配置并指定CommonJS模块：

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "module": "CommonJS",
    "rootDir": "./src/vscode",
    "outDir": "./out/vscode"
  },
  "include": ["src/vscode/**/*"]
}

3. 为webview目录创建专属配置 #

新建tsconfig.webview.json，继承基础配置并指定ESNext模块：

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "module": "ESNext",
    "rootDir": "./src/webview",
    "outDir": "./out/webview"
  },
  "include": ["src/webview/**/*"]
}

4. 添加编译脚本 #

在package.json中添加快捷编译命令，方便一键执行：

{
  "scripts": {
    "build": "tsc -p tsconfig.vscode.json && tsc -p tsconfig.webview.json",
    "build:vscode": "tsc -p tsconfig.vscode.json",
    "build:webview": "tsc -p tsconfig.webview.json"
  }
}

关键注意事项 #

• rootDir必须对应各自的源码目录，确保编译后输出的文件结构与源码一致
• outDir分别指定到out下的子目录，避免两个目录的编译产物互相覆盖
• 执行npm run build即可同时完成两个目录的编译，单独编译某部分可执行对应的build:vscode或build:webview命令

内容的提问来源于stack exchange，提问作者Jochen Kühner