lerna 的打字稿构建问题答案

【问题标题】：Typescript build issue with lernalerna 的打字稿构建问题
【发布时间】：2020-08-14 03:53:15
【问题描述】：

我目前有一个 lerna/react/TS 项目，结构如下：

.
├── lerna.json
├── package.json
├── packages
│   ├── patient
│   │   ├── package.json
│   │   ├── src
│   │   │   └── index.tsx
│   │   ├── tsconfig.build.json
│   │   └── tsconfig.json
│   └── appointment
│       ├── package.json
│       ├── src
│       │   └── index.tsx
│       ├── tsconfig.build.json
│       └── tsconfig.json
├── tsconfig.build.json
└── tsconfig.json

在packages/appointment/src/index.tsx 中导入patient 模块：

import { Patient } from '@ui-sdk/patient';

在appointment 文件夹内运行构建命令tsc --project ./tsconfig.build.json 时，会再次添加patient 代码。

实际：

/packages/appointment/dist/patient/index.js
/packages/appointment/dist/appointment/index.js

预期：

/packages/appointment/dist/index.js

/packages/appointment/tsconfig.build.json 的构建配置如下：

{
  "extends": "../../tsconfig.build.json",

  "compilerOptions": {
    "outDir": "./dist",
    "jsx": "react",
    "esModuleInterop": true
  },

  "include": [
    "src/**/*"
  ]
}

以及根级别的主要tsconfig.json：

{
  "compilerOptions": {
    "module": "esnext",
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "skipLibCheck": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "moduleResolution": "node",
    "declaration": true,
    "baseUrl": ".",
    "paths": {
      "@ui-sdk/*": ["packages/*/src"]
    },
  },

  "exclude": [
    "node_modules",
    "dist"
  ]
}

如果我删除此部分：

"baseUrl": ".",
    "paths": {
      "@ui-sdk/*": ["packages/*/src"]
    },

编译报错

packages/appointment/src/index.tsx(2,24): error TS2307: Cannot find module '@ui-sdk/patient' or its corresponding type declarations.

知道如何使构建仅包含该组件的代码，而不是将其他文件放在构建文件夹中吗？

【问题讨论】：

标签： reactjs typescript tsconfig lerna

【解决方案1】：

我刚刚遇到了同样的问题。问题是我不得不从tsconfig.build.json 文件中省略“路径”。

tsconfig.json

{
  "extends" "./tsconfig.build.json",
  "compilerOptions": {
    "paths": {
      "@ui-sdk/*": ["packages/*/src"]
    }
  }
}

tsconfig.build.json

{
  "compilerOptions": {
    // ...
  }
}

这导致 TS 不会尝试解析您的本地包，而是将其视为对外部包的引用。

【讨论】：