[英]Resolving TypeScript dependencies in yarn workspaces
I'm currently trying to set up a React/TypeScript monorepo with two workspaces, @scope/project-lib and @scope/project-app.我目前正在尝试使用两个工作区 @scope/project-lib 和 @scope/project-app 建立一个 React/TypeScript monorepo。 I have @scope/project-app's package.json importing
@scope/project-lib: "*"
under dependencies.我有 @scope/project-app 的 package.json 在依赖项下导入
@scope/project-lib: "*"
。 I can get it to work by doing我可以通过做
import { MyComponent } from @scope/project-lib/build/components/MyComponent
but consumers are going to use但消费者会使用
import { MyComponent } from @scope/project-lib/components/MyComponent
after I publish it, so obviously I'd like to use it that way inside the workspace as well.在我发布它之后,很明显我也想在工作区中以这种方式使用它。
I referenced the project-lib path in my tsconfig for project-app:我在我的 tsconfig 中为 project-app 引用了 project-lib 路径:
"compilerOptions": {
"paths": { "@scope/project-lib/*": ["../project-lib/build/*"] }
// other config options
}
I also import it into project-app's package.json:我还将它导入到项目应用程序的 package.json 中:
"dependencies": {
"@scope/project-lib": "*",
"react": "^16.12.0",
"react-dom": "^16.12.0"
},
The odd part is that omitting the /build/ part of the path shows this error: Module not found: Error: Can't resolve '@scope/project-lib/components/MyComponent' in 'path/to/user/folder/scope/packages/project-app/src'
奇怪的是,省略路径的 /build/ 部分会显示此错误:
Module not found: Error: Can't resolve '@scope/project-lib/components/MyComponent' in 'path/to/user/folder/scope/packages/project-app/src'
I don't understand why it's looking in src (or maybe I should be pointing everything as src? But then how does it build TS and JSX on the fly?)我不明白为什么它在 src 中查找(或者我应该将所有内容都指向 src?但是它是如何即时构建 TS 和 JSX 的呢?)
I too have a monorepo with TypeScript + Lerna (w/ Yarn Workspaces) with ~50+ packages.我也有一个带有约 50 多个包的 TypeScript + Lerna(带 Yarn 工作区)的 monorepo。
It is configured to not use the path
directive, because Yarn Workspaces can automatically detect those and symlink to the package directory in the root node_modules
folder.它被配置为不使用
path
指令,因为 Yarn Workspaces 可以自动检测这些并符号链接到根node_modules
文件夹中的 package 目录。 That way, it will be as it is any 3rd party package and the package.json
's main
/ module
field will be read and used.这样,它将像任何第 3 方 package 和
package.json
的main
/ module
字段一样被读取和使用。
Graphically以图形方式
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
NB.注意。 packages must be built at least once before type checking and such, to ensure that their
dist
folder exist包必须在类型检查之前至少构建一次,以确保它们的
dist
文件夹存在
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.