Starting from 0, use pnpm to build a demo managed by monorepo

Write it at the front

Monorepo You should have heard this word more than once , image Vue3、Vite、ElementPlus And other excellent open source projects Monorepo Managing projects in a different way , And the projects mentioned here all adopt pnpm As a package management tool .

This article uses pnpm Build a simple one Monorepo Projects managed in a way .

What is? Monorepo？ What is? pnpm？

Q： What is? Monorepo？

A：Monorepo It's a way of project management , Is to put multiple projects in one warehouse , You can refer to an article by the God three yuan big brother ： Why is modern front-end engineering increasingly inseparable from Monorepo?, This article introduces Monorepo The concept of 、 Revenue and MulitRepo The disadvantages of .

Q： What is? pnpm？

A：pnpm It's a package management tool , Native support Monorepo, Than npm and yarn Faster , Others can refer to Official website And another article of God's three yuan boss ： Why do I recommend pnpm instead of npm/yarn?

To get a Monorepo Of demo play

Now let's start using pnpm To build a Monorepo, Before the business begins , You need to make sure that your computer has Node.js, My version is 16.9.0.

First of all, you need to have pnpm This tool , You can find a way to install it from the official website , Or use it directly npm install , The order is as follows ：

npm i pnpm -g

Now we start making things .

First step , Create a project root directory , It's called monorepo-demo, How to create , Here's the command ：

mkdir monorepo-demo

The second step , initialization package.json, There's nothing to that , The order is as follows ：

pnpm init

Here I made a little change to the content ,package.json Is as follows ：

{
  "name": "monorepo-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "type": "module",
  "keywords": [],
  "author": "ywanzhou",
  "license": "MIT"
}

Here I mainly add one type Field , Here I use ESModule Modular specification .

The third step , establish pnpm-workspace.yaml file , This file defines the root directory of the workspace , The contents are as follows ：

packages:
  - 'packages/ **'

Now we can packages Create multiple projects in , The directory structure is as follows ：

monorepo-demo
├── package.json
├── packages
│   ├── components
│   │   ├── index.js
│   │   └── package.json
│   ├── core
│   │   ├── index.js
│   │   └── package.json
│   ├── utils
│   │   ├── index.js
│   │   └── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml

Step four , Write for each project package.json, In fact, the main thing is to write the name , Convenient for future use , Here I have the following ：

{
  "name": "@packages/components",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "type": "module",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.21",
    "@packages/utils": "workspace:^1.0.0"
  }
}

The remaining two names are @packages/core and @packages/utils.

In fact, the basic work will be ready , Now let's talk about how to install dependencies , How to be in packageA I quote packageB.

Installation dependency

Just this demo Come on , If we install dependencies in the root directory , This dependency can be found in all packages Use in , If we need a specific package How to install dependencies ？

cd To package The directory of the ？ leak , Big leak , We can use the following command ：

pnpm --filter <package_selector> <command>

For example, we need to be in @packages/components install lodash, The order is as follows ：

pnpm -F @packages/components add lodash

-F Equivalent to --filter

Now we are going @packages/utils Install a dayjs, The order is as follows ：

pnpm --filter @packages/utils add dayjs

packageA I quote packageB

Now let's do it package Mutual reference between , First of all we have @packages/utils/index.js Write the following in ：

import dayjs from 'dayjs'
export function format(time, f = 'YYYY-MM-DD') {
  return dayjs(time).format(f)
}

Then we execute the following command ：

pnpm -F @packages/components add @packages/[email protected]*

This command is expressed in @packages/components install @packages/utils, Among them @* Indicates that the latest version is synchronized by default , Save the problem of having to synchronize the latest version every time .

After installation @packages/components/package.json The contents are as follows ：

{
  "name": "@packages/components",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "type": "module",
  "license": "ISC",
  "dependencies": {
    "@packages/utils": "workspace: *",
    "lodash": "^4.17.21"
  }
}

And then we were in @packages/components/index.js Write the following ：

import { format } from '@packages/utils'
console.log(format(new Date()))

Then we run the following command in the project root directory

node packages/components

You can print out the current date .