Nx自定义构建脚本编译多文件时遇TypeScript错误及路径问题

一、报错但仍生成文件的原因 #

1. 类型错误根源：@types/jsdom与parse5版本不兼容。新版parse5已移除ElementLocation导出，但旧版@types/jsdom仍在引用该成员，触发类型检查报错。
2. 产物生成逻辑：TypeScript默认配置下，即便存在类型错误，只要代码逻辑无语法问题，仍会生成编译产物（除非开启noEmitOnError: true）。你的main.ts和main2.ts仅包含简单的console.log语句，编译逻辑正常，因此会在原目录生成文件。

二、产物未输出到dist目录的原因 #

nx:run-commands的outputPath字段仅用于告知Nx构建产物的位置（用于缓存和依赖分析），不会自动将该路径传递给tsc命令。你直接执行tsc编译单个文件时，未指定--outDir参数，TypeScript默认将产物输出到源文件所在目录。

三、完整解决方案 #

1. 修复类型错误 #

安装兼容的依赖版本，解决parse5的类型匹配问题：

# 卸载现有冲突依赖
npm uninstall @types/jsdom parse5
# 安装兼容版本（@types/jsdom@16.x 适配保留ElementLocation的parse5@6.x）
npm install -D @types/jsdom@16.2.16 parse5@6.0.1

2. 调整构建脚本，指定输出路径 #

修改project.json中的ts-build脚本，给tsc命令添加--outDir参数，同时可合并编译命令简化操作：

"ts-build": {
  "executor": "nx:run-commands",
  "options": {
    "commands": [
      "tsc apps/test-app/src/main.ts apps/test-app/src/main2.ts --outDir dist/apps/test-app --rootDir apps/test-app/src"
    ],
    "outputPath": "dist/apps/test-app"
  }
},

更推荐遵循Nx规范的方式：利用项目的tsconfig.app.json配置编译范围，修改脚本为：

"ts-build": {
  "executor": "nx:run-commands",
  "options": {
    "commands": [
      "tsc -p apps/test-app/tsconfig.app.json --outDir dist/apps/test-app"
    ],
    "outputPath": "dist/apps/test-app"
  }
},

同时在apps/test-app/tsconfig.app.json的include字段中添加main2.ts：

"include": [
  "src/main.ts",
  "src/main2.ts"
]

3. 可选：类型错误时停止产物生成 #

若希望类型检查失败时不生成文件，可在tsconfig.json的compilerOptions中添加：

"noEmitOnError": true

完成上述配置后，重新执行构建命令：

npx nx ts-build test-app

即可解决类型错误，并将编译产物正确输出到dist/apps/test-app目录。

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