This is the third day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

Monorepo can use Lerna as well as simpler YARN and PNPM. However, PNPM is more powerful and perfect than YARN package management mechanism. Therefore, this article is mainly about implementing Monorepo by simply using PNPM

start

Create a new pnpm-workspace.yaml file that defines the root directory of your workspace and enables you to include/exclude directories from your workspace. By default, all subdirectories are included.

Packages: # all packages - in packages/ subdirectory'packages/**'Package - not included in the test folder'! **/test/**'
Copy the code

We can then create multiple projects in Packages, in this case HTTP, Utils, Web, and Server

Install global dependencies

First install PNPM globally

npm i pnpm -g

Install typescript for the four project common libraries

pnpm i typescript

-w(– workshop-root) -w(– workshop-root)

pnpm i typescript -w

Install common development dependencies

pnpm i typescript -w -D

Node_modules displays only typescript, and typescript dependencies are not shown in node_modules. Instead, all typescript dependencies are shown in.pnpm, which uses soft links to point to real addresses. Interdependence is avoided.

Install local dependencies

For local dependencies, the simplest solution is CD Packages/HTTP

pnpm install axios

PNPM init -y (@monorepo/ HTTP); PNPM init -y (@monorepo/ HTTP) Otherwise, PNPM add –filter will not find the project directory to add the package

pnpm add express --filter @monorepo/http

Interdependencies within installation projects

For example, if the Web needs to rely on HTTP functionality for requests, then the dependencies need to be interdependent. In order for the dependencies to update the latest version in real time, use wildcards to update the version

pnpm add @monorepo/http@* --filter @monorepo/web

Workspace looks local by wildcard,pnpm publishThe basic model of the basic component library is built on the basis of the pattern above, which translates to real path dependence.

The monorepo PNPM command is commonly used

The ability to list the source location of the package and which projects within Monorepo reference it.

pnpm why -r
Copy the code

Cancel the installation of a dependency

pnpm remove axios

pnpm remove axios --filter  @monorepo/http
Copy the code

Local link file, same as NPM link

pnpm link --global
pnpm link --global <pkg>
Copy the code

Unbind files locally

### --recursive, -r[​](https://pnpm. IO /zh/cli/ recursive #--recursive--r "Link directly to this heading ")Unlink in all subdirectories, or when at [workspace](HTTPS://pnpm. IO /zh/workspaces) all 'packages' found in workspace' packages' when executing commands.

### --filter <package_selector>
Copy the code