通过monorepo管理多个子项目

通过monorepo管理多个子项目

1. Monorepo模式

Monorepo 模式下,根目录通常不建议直接安装依赖,而是通过工作区(workspaces)来管理依赖。
但是在一些情况下,在根目录安装一些共享依赖也是可以的。

  1. 在根目录安装开发相关的依赖
    TypeScript, ESLint, Jest等。这些可以被所有子包共享。
  2. 安装一些工具类库
    例如Lodash, Moment等小而通用的工具类库。
  3. 安装一些根模块需要的依赖
    如果根目录下也有一些共享的模块,那么这些模块需要的依赖可以安装在根目录下。
  4. 简单的 Monorepo 项目
    如果子包之间共享的依赖不多,也可以直接都安装在根目录,而不是过度引入工作区管理的复杂性。
  5. 通过优化提高共享依赖重用
    比如使用些 alias、symlink 等方式提高依赖共享。

2. 根目录

mkdir root-project
cd root-project
pnpm init

创建一个pnpm-workspace.yaml文件, 两个子项目分别是vite-reactvite-vue

packages:
  - "vite-react/"
  - "vite-vue/"

通过monorepo管理多个子项目_第1张图片

3. 子项目

3.1 创建

使用vite的脚手架创建项目时,可以不用先创建文件夹,通过pnpm create vite按照步骤选择自己功能
通过monorepo管理多个子项目_第2张图片

3.2 安装依赖

通过monorepo管理多个子项目_第3张图片

  • 这里每个项目还未安装node_modules, 可以通过monorepo的特性,直接在根目录输入pnpm i即可

通过monorepo管理多个子项目_第4张图片
通过monorepo管理多个子项目_第5张图片

3.3 通过在根目录下的package.json中配置命令,可以运行子项目

"scripts": {
  "dev:react": "pnpm -C vite-react dev",
  "dev:vue": "pnpm -C vite-vue dev"
}

通过monorepo管理多个子项目_第6张图片

说明: pnpm -C

4. 其他

通过pnpm i -S | -D -w用来在根目录安装共享依赖, 其他子项目可以使用
通过monorepo管理多个子项目_第7张图片
通过monorepo管理多个子项目_第8张图片

你可能感兴趣的:(Vue,JavaScript,NodeJS,前端,javascript,开发语言)