解决纱线工作区中的 TypeScript 依赖项

Posted 2023-02-16

【中文标题】解决纱线工作区中的 TypeScript 依赖项

【英文标题】：Resolving TypeScript dependencies in yarn workspaces

【发布时间】：2021-04-13 08:56:22

【问题描述】：

我目前正在尝试建立一个带有两个工作区的 React/TypeScript monorepo，@scope/project-lib 和 @scope/project-app。我有 @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 的呢？）

【参考方案1】：

我也有一个带有约 50 多个包的 TypeScript + Lerna（带 Yarn 工作区）的 monorepo。

它被配置为不使用 path 指令，因为 Yarn Workspaces 可以自动检测这些指令并符号链接到根 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 文件夹存在

【讨论】：

也许 package.json 中的“main”是问题所在。当 baz 被定义并从 index.ts 导出时，进行您建议的更改确实允许我执行import baz from '@scope/foo'。但我仍然有从其他目录导入的问题。你可以为“main”指定一个目录吗？

@Mogarrr 您不能为main 指定目录，但可以使用exports ；遗憾的是，到今天为止，TS 仍然不支持它。 4.3.0-beta 应该支持它，但它仍然坏了。我一直在寻找类似的方法，但仍然想知道什么是最好的。