reactjs - 解决 yarn 工作区中的 TypeScript 依赖项

Question

我目前正在尝试使用两个工作区 @scope/project-lib 和 @scope/project-app 来设置 React/TypeScript monorepo。我有 @scope/project-app 的 package.json 导入 @scope/project-lib: "*"在依赖项下。我可以通过这样做来让它工作import { MyComponent } from @scope/project-lib/build/components/MyComponent但消费者会使用import { MyComponent } from @scope/project-lib/components/MyComponent在我发布它之后，显然我也想在工作区中以这种方式使用它。
我在我的 tsconfig 中为 project-app 引用了 project-lib 路径:

  "compilerOptions": {
    "paths": { "@scope/project-lib/*": ["../project-lib/build/*"] }
    // other config options
  }

我也将它导入到 project-app 的 package.json 中:

  "dependencies": {
    "@scope/project-lib": "*",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },

奇怪的是，省略路径的/build/部分会显示此错误: Module not found: Error: Can't resolve '@scope/project-lib/components/MyComponent' in 'path/to/user/folder/scope/packages/project-app/src'我不明白为什么它在 src 中查找(或者我应该将所有内容都指向 src？但是它是如何动态构建 TS 和 JSX 的？)

Answer 1

我也有一个带有约 50 个包的 TypeScript + Lerna(带 Yarn 工作区)的 monorepo。
它被配置为不使用 path指令，因为 Yarn Workspaces 可以自动检测这些并符号链接(symbolic link)到根目录中的包目录 node_modules文件夹。这样，它就像任何 3rd 方包和 package.json 一样。的 main/module字段将被读取和使用。
以图形方式

node_modules/
-- @scope/ -> (this is automatically generated by yarn)
---- foo -> symlink /packages/foo
---- bar -> symlink /packages/bar

packages/
-- foo/
---- dist/ -> built by TypeScript
------ index.js
---- package.json -> contains "main": "dist/index.js"
---- index.ts
---- tsconfig.json
-- bar/
---- package.json -> contains "@scope/foo" as dependency
---- index.ts -> contains "import {baz} from '@scope/foo'"
---- tsconfig.json

package.json
yarn.lock

注意。包必须在类型检查等之前至少构建一次，以确保它们的 dist文件夹存在