javascript - monorepo 项目是否可以做到不被固有的目录结构所限制？

Question

在使用pnpm workspace.yaml 来实现monorepo的时候，需要：预先配置好项目结构：

1)多个项目都放在packages/目录下
2)想要共享的子包，放在定义的 components/目录下（或加上其他的目录）

===

但是这样的目录结构是有限制的。

比如我们开发多个项目（eg. react-demo-08, react-demo-09）：
1）项目的目录结构已经成型：

2）并且开发的时候，都是VSCode打开react-demo-08, react-demo-09 这样多个界面

请问现在想要对react-demo-09内的components下的一个子包进行共用，使用现有的 pnpm + monorepo 技术是做不到的是吗？

Answer 1

首先是开发的时候，应该打开pnpm-workspace.yaml 所在的目录。而不是每个项目单独打开。

在components下新建一个app,例如shard_01, 那么把react-demo-09中共用的部分，剪切到components/shard_01/index.ts 作为独立的包，并配置components/shard_01/package.json

"name": "@components/shard_01"

然后在react-demo-08, react-demo-09的package.json中引用这个包。

"dependencies":{
    "@components/shard_01": "workspace:*",
}

然后在项目内写入引用语句

import * as shard_01 from '@components/shard_01';
console.log(shard_01)

Answer 2

1. monorepo 就应该按照 monorepo 来用。你不能说我习惯骑自行车，汽车为啥不给我装脚蹬子？你应该用 IDE 打开 monorepo 根路径，然后使用 workspace 方式引用组件。
2. 看目录名反正你也是 demo 而已，那就把公共代码复制一份放到 /components 不就好了。
3. 你也可以直接在 08 项目里安装引用 09 项目。
4. 如果也不想这样，使用软链的方式也可以，单独建立一个组件目录，指向统一的文件。

Answer 3

在monorepo项目中，确实通常会有一个预先定义的目录结构来组织不同的包（packages）和可能的共享组件（components）。然而，这并不意味着monorepo项目必须被这种固有的目录结构所限制。相反，你可以通过一些配置和调整来灵活处理你的项目结构，以满足你的特定需求。

对于你提到的情况，即使你的项目（如react-demo-08和react-demo-09）已经存在于一个更广泛的项目结构中，你仍然可以：

1. 使用软链接（Symbolic Links）或别名（Aliases）：如果react-demo-09需要访问react-demo-08中的某个组件或库，并且你不想或不能改变它们的物理位置，你可以使用操作系统的软链接功能来在react-demo-09的目录中创建一个指向所需组件的链接。不过，这种方法可能需要你在构建和运行时处理路径解析的问题。
2. 调整pnpm配置：在pnpm的workspace.yaml中，你可以灵活定义哪些目录或文件被视为工作区的一部分。虽然pnpm默认会寻找packages/目录下的包，但你可以通过修改配置文件来包括其他路径。例如，你可以将react-demo-08和react-demo-09的components目录都添加到工作区配置中，这样它们就可以被pnpm识别为可共享或依赖的组件库。
3. 重构项目结构：如果可能的话，考虑重构你的项目结构以更好地适应monorepo模式。这可能包括将共享组件移动到一个专门的components目录或packages目录下的一个新包中，然后在需要的地方通过pnpm的依赖管理功能来引用它们。
4. 使用路径别名：在TypeScript、Webpack等配置中，你可以设置路径别名来简化对项目中不同部分的引用。这有助于你即使在不改变物理结构的情况下，也能以更灵活的方式组织代码。

综上所述，虽然monorepo项目通常会遵循一定的目录结构约定，但你完全可以通过上述方法或其他创造性的解决方案来绕过这些限制，以适应你的特定需求和工作流程。