javascript - pnpm构建Monorepo项目的一些问题?

Question

场景如下：有三个项目A,B,C，这三个项目的关系如下图

1. A是一个核心项目，其最终会使用Electron打成一个独立的项目A.EXE
2. B项目是A项目的超集，在A的基础上会增加一部分功能，最终是一个B.WEB项目
3. C项目是B项目的超级，在B的基础上也会增加一部分功能，最终也会使用Electron打成一个独立的项目C.EXE

经过一番调研，前端打算使用pnpm构建Monorepo架构，初步设想如下:

root├── package.json├── pnpm-workspace.yaml├── packages  ├── common    ├── package.json  ├── utils    ├── package.json  ├── A    ├── package.json  ├── B    ├── package.json  ├── C    ├── package.json

common用于存放那些共用的业务代码，a,b,c分别去依赖这个包。如果我把common包所需要vue、vue-router、pinia都安装到common里，然后a,b,c去依赖它，但是这个时候在a,b,c中导入vue就不行了，这跟我想的有点不一样哈（依赖不能传递吗？），所以我只能把它安装到根目录下。安装到根目录下倒是跑起来了，不知道这样可以吗？刚接触到这个，前端也不是很熟，求大佬指导

大致了解了Monorepo架构，初步选项使用较为简单的pnpm

Answer 1

1. 大体上没问题
2. pnpm 因为依赖树解析的问题，不支持直接使用“依赖的依赖”，即 A 依赖 B，你安装了 A，可以使用 A，但是不能直接使用 B
3. 所以最好的办法就是每个项目里单独安装一份 vue、vue-router 等
4. 不过不用担心，pnpm 使用硬链接，所以不存在重复下载和安装的问题

Answer 2

对于使用pnpm构建Monorepo项目，有一些问题和注意事项需要考虑。

首先，关于依赖管理的问题，Monorepo架构允许你在多个项目之间共享和重用代码，同时也能够管理这些项目之间的依赖关系。在你的场景中，common包包含了共用的业务代码，而A、B、C项目分别依赖于这个包。通常情况下，依赖关系是可以传递的，即如果A依赖于B，B依赖于common，那么A也会间接依赖于common。但是，如果遇到无法导入vue的情况，可能是因为vue被安装在了根目录下，而不是在common包中。

为了解决这个问题，你可以尝试将vue、vue-router、pinia等依赖安装在common包中。这样，A、B、C项目只需要依赖common包，而不需要直接依赖这些依赖项。在common包中安装这些依赖项后，确保在common包的package.json文件中正确声明这些依赖项，以便其他项目可以正确地引用和使用它们。

另外，关于安装依赖项的位置，一般来说，将依赖项安装到根目录下是可行的，但是这样做可能会增加一些管理和维护的复杂性。如果你选择将依赖项安装到根目录下，确保在使用这些依赖项时使用相对路径或者别名来导入它们，以避免潜在的问题。

最后，对于Monorepo架构的构建和打包过程，你可能需要使用一些工具和插件来支持多项目构建和打包。你可以考虑使用一些现有的Monorepo工具，如Lerna、Yarn Workspaces等，它们提供了更高级的特性来管理多个项目之间的依赖关系和构建过程。根据你的具体需求和项目规模，选择适合你的工具和插件来构建和打包你的Monorepo项目。