Catalog overview
Preface
In development, how do we manage multiple projects? How do you manage multiple projects that have the same dependencies? Many open source libraries currently use Monorepo+pnpm technology to manage dependencies, versions, configurations, etc., which can also improve code reusability and collaboration efficiency. For example, if you want to write a component library, the component library needs documentation, and you want to introduce your component library and display it in your documentation project, then Monorepo and pnpm will be used. At this time, it will be in your component library documentation project. , link your component library, and you can reference it directly. So, let’s get to the point!
Understand basic concepts
- Monorepo is a way of managing project code. It refers to managing multiple modules or packages in a large repository (repo). This can easily and uniformly manage dependencies, versions, configurations, etc., and can also improve code reusability and collaboration efficiency.
- pnpm is a package management tool that helps you install, update, publish, and manage various packages used in your projects. The characteristic of pnpm is that it uses hard link and soft link technology to avoid repeatedly downloading and storing the same package, thereby saving disk space and installation time.
Basic usage
Install pnpm
npm install -g pnpm
Create root project
We need to create a root project, which is the entry point to our monorepo. We can run the following command:
pnpm init
This will generate a package.json file, where we can add some basic information, such as project name, version, description, etc. We can also add some global dependencies and scripts here, such as TypeScript, ESLint, Prettier, etc.
Create subproject
Next, we need to create some subprojects, which are modules or packages in our monorepo. We can create some folders in the root directory, such as test1, test2, etc. Then, run the following commands in each folder:
pnpm init
This will generate a package.json file for each subproject, where we can add some specific information, such as project name, version, description, dependencies, scripts, etc. If there is an existing project, copy it directly into it
Configure pnpm-workspace.yaml
In order for pnpm to know our monorepo structure, we need to create a pnpm-workspace.yaml file in the root directory and list our subprojects in it. For example:
packages:
- "test1"
- "test2"
- "share"
Configure tsconfig.json
If we use TypeScript to develop our project, we also need to configure the tsconfig.json file to specify the TypeScript compilation options. We can create a tsconfig.base.json file in the root directory and add some common options in it, such as:
{
"compilerOptions": {
"strict": true,
"esModuleInterop": true,
"moduleResolution": "node",
"sourceMap": true,
}
}
Then, create a tsconfig.json file in each subproject and let it inherit from the tsconfig.base.json file, such as:
{
"extends": "../tsconfig.base.json",
"compilerOptions": {
},
"include": ["src/**/*"]
}
This way, we can maintain TypeScript configuration consistency and avoid duplication.
share code
This is the most important step. Often we conduct multi-project management to share common modules, such as type definitions, tool functions, components, etc. At this time, we can use the soft connection function of pnpm to achieve this. For example, suppose we have a share subproject that exports some type definitions and utility functions. Then, in other subprojects that need to use them, we can run the following commands:
pnpm add share
pnpm add is the name in package.json in the subproject.
This will add a dependency in package.json and create a soft link to the shared subproject. Then, you can directly import the content in the shared subproject in the code, such as:
import {
User, formatDate } from "share";
run script
Finally, we may need to run some scripts to perform some tasks, such as compilation, testing, startup, etc. We can define some scripts in the package.json of each sub-project, such as:
{
"scripts": {
"build": "tsc",
"test": "jest",
"start": "node dist/index.js"
}
}
We can then use pnpm's recursive command to run these scripts in all or some subprojects, such as:
pnpm recursive run build # 在所有子项目中运行 build 脚本
pnpm recursive --filter client run start # 在 client 子项目中运行 start 脚本
In this way, we can easily manage our monorepo and enjoy the efficiency and optimization of pnpm.
end
Multi-project management can greatly improve the reusability and maintainability of our code. Instead of being a CV warrior, why not try unused technologies?