解决打字稿依赖性纱线工作区

编程问答 2022-05-31

问题描述

目前，我正在试图建立一个反应，和/打字稿monorepo有两个工作区，@范围/项目-lib和@范围/项目的应用程序。我有@范围/项目的应用程序的的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
  }

我也将其导入到项目的应用程序的的package.json：

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

在奇数部分是该路径节目省略/构建/部分此错误： 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上飞？）

解决方法

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

它被配置为不使用 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 文件夹存在

monorepopackage.jsonreactjsreactjsreactjsreactjstypescripttypescripttypescriptyarnpkg