在开发中,我们如何进行多项目管理,多个项目之间有同样的依赖你又该怎么去管理?在目前很多开源库,都使用了Monorepo+pnpm的技术来实现管理依赖、版本、配置等,也可以提高代码的复用性和协作效率。比如说你想写一个组件库,组件库需要文档,你的文档项目中想引入你的组件库并展示,那么这时候就会用到Monorepo和pnpm了,这时候会在你的组件库文档项目中,链接你的组件库,就可以直接引用了。那么,接下来我们进入正题!
npm install -g pnpm
我们需要创建一个根项目,它是我们 monorepo 的入口。我们可以运行以下命令:
pnpm init
这会生成一个 package.json 文件,我们可以在里面添加一些基本的信息,比如项目名称、版本、描述等。我们也可以在这里添加一些全局的依赖和脚本,比如 TypeScript、ESLint、Prettier 等
接下来,我们需要创建一些子项目,它们是我们 monorepo 中的模块或包。我们可以在根目录下创建一些文件夹,比如 test1、test2等。然后,在每个文件夹中运行以下命令:
pnpm init
这会为每个子项目生成一个 package.json 文件,我们可以在里面添加一些特定的信息,比如项目名称、版本、描述、依赖、脚本等。如果有现成的项目直接复制进去
为了让 pnpm 知道我们的 monorepo 结构,我们需要在根目录下创建一个 pnpm-workspace.yaml 文件,并在里面列出我们的子项目。例如:
packages:
- "test1"
- "test2"
- "share"
如果我们使用 TypeScript 来开发我们的项目,我们还需要配置 tsconfig.json 文件来指定 TypeScript 的编译选项。我们可以在根目录下创建一个 tsconfig.base.json 文件,并在里面添加一些通用的选项,比如:
{
"compilerOptions": {
"strict": true,
"esModuleInterop": true,
"moduleResolution": "node",
"sourceMap": true,
}
}
然后,在每个子项目中创建一个 tsconfig.json 文件,并让它继承自 tsconfig.base.json 文件,比如:
{
"extends": "../tsconfig.base.json",
"compilerOptions": {
},
"include": ["src/**/*"]
}
这样,我们就可以保持 TypeScript 的配置一致性,并且避免重复。
这里是最重要的一步,往往我们进行多项目管理都是为了共享公共的模块,比如类型定义、工具函数、组件等。这时候,我们可以使用 pnpm 的 软连接功能来实现。例如,假设我们有一个 share 子项目,它导出了一些类型定义和工具函数。那么,在其他需要使用它们的子项目中,我们可以运行以下命令:
pnpm add share
pnpm add 的就是子项目中的package.json中的name
这会在 package.json 中添加一个依赖项,并且创建一个软链接到 shared 子项目。然后,在代码中就可以直接导入 shared 子项目中的内容了,比如:
import { User, formatDate } from "share";
最后,我们可能需要运行一些脚本来执行一些任务,比如编译、测试、启动等。我们可以在每个子项目的 package.json 中定义一些脚本,比如:
{
"scripts": {
"build": "tsc",
"test": "jest",
"start": "node dist/index.js"
}
}
然后,我们可以使用 pnpm 的 recursive 命令来在所有或部分子项目中运行这些脚本,比如:
pnpm recursive run build # 在所有子项目中运行 build 脚本
pnpm recursive --filter client run start # 在 client 子项目中运行 start 脚本
这样,我们就可以方便地管理我们的 monorepo,并且享受 pnpm 的高效和优化。
多项目管理能大大提高我们代码的复用性和维护性,与其当个cv战士,何不尝试一下没用过的技术呢?