TypeScript：错误：使用路径时找不到模块

Question

我有一个包含后端（NodeJS）、前端（Angular）和共享目录（前端和后端共享的容器模型）的 monorepo。

preagree-mono/
   preagree-api/
   preagree-app/
   preagree-shared/

将文件夹添加到paths

后，角度应用程序运行完美，并使用共享类型正确构建

preagree-app/tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "src",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "lib": ["es2018", "dom"],
    "module": "es2015",
    "moduleResolution": "node",
    "outDir": "./dist/out-tsc",
    "paths": {
      "@preagree/*": ["@preagree/*"],
      "@preagree-shared/*": ["../../preagree-shared/*"]
    },
    "sourceMap": true,
    "strictNullChecks": false,
    "target": "es6",
    "typeRoots": ["../node_modules/@types"],
    "types": ["node"]
  }
}

但是 API 无法正确编译。 PHPStorm 正确地选择类型并从共享文件夹导入它们，但是当我去构建时我得到......

$ tsc && PRODUCTION=false node ./build/preagree-api/app/app.js
internal/modules/cjs/loader.js:613
    throw err;
    ^

Error: Cannot find module '@preagree-shared/models/preagree-http'
Require stack:
- /home/nebbsie/preagree-mono/preagree-api/build/preagree-api/app/utils/responses/generic/error-response.js
- /home/nebbsie/preagree-mono/preagree-api/build/preagree-api/app/utils/responses/index.js
- /home/nebbsie/preagree-mono/preagree-api/build/preagree-api/app/preagree/users/users.route.js
- /home/nebbsie/preagree-mono/preagree-api/build/preagree-api/app/preagree/users/index.js
- /home/nebbsie/preagree-mono/preagree-api/build/preagree-api/app/routes/index.js
- /home/nebbsie/preagree-mono/preagree-api/build/preagree-api/app/app.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:610:15)
    at Function.Module._load (internal/modules/cjs/loader.js:526:27)
    at Module.require (internal/modules/cjs/loader.js:666:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/home/nebbsie/preagree-mono/preagree-api/build/preagree-api/app/utils/responses/generic/error-response.js:4:25)
    at Module._compile (internal/modules/cjs/loader.js:759:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at Function.Module._load (internal/modules/cjs/loader.js:555:12)
    at Module.require (internal/modules/cjs/loader.js:666:19)
error Command failed with exit code 1.

这是 API 的 tsconfig。 preagree-api/tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./app",
    "module": "commonjs",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": false,
    "moduleResolution": "node",
    "outDir": "build",
    "noResolve": false,
    "paths": {
      "@preagree/*": ["@preagree/*"],
      "@preagree-shared/*": ["../../preagree-shared/*"]
    },
    "target": "es6",
    "types": ["node"],
    "typeRoots": ["../node_modules/@types"]
  },
  "exclude": ["node_modules", ".vscode"],
  "include": ["app/**/*"]
}

奇怪的是，我创建了一个从共享文件（与 API 位于同一文件夹中）导入的快速测试文件。此构建并运行。

import { UsersUpdatePayload } from '@preagree-shared/models/users';

const users: UsersUpdatePayload = { lastName: 'Aaron' };

console.log(users);

Answer 1

TSConfig

paths

仅影响类型系统。它们对运行时代码没有影响。它们本质上是一种告诉 TypeScript “当其他工具为我捆绑我的代码时，它将识别以下路径别名”。

崩溃来自于

PRODUCTION=false node ./build/preagree-api/app/app.js

呼叫。

tsc

电话没有产生任何投诉。

如果您想使用这样的 TSConfig 路径，您将需要一个单独的打包器，例如 tsup，它可以基于这些路径生成构建的输出 JS。