JS前端架構pnpm構建Monorepo方式管理demo

Posted on by

🍍 寫在前面

Monorepo這個詞你應該不止一次聽說瞭，像Vue3、Vite、ElementPlus等優秀開源項目都是使用Monorepo的方式管理項目，且這裡說到的這幾個項目都是采用pnpm作為包管理工具。

這篇文章就使用pnpm構建一個簡單的Monorepo方式管理的項目。

🍊 什麼是Monorepo？什麼是pnpm？

Q：什麼是Monorepo？

A：Monorepo是一種項目管理方式，就是把多個項目放在一個倉庫裡面，可以參考神三元大佬的一篇文章：現代前端工程為什麼越來越離不開 Monorepo?，這篇文章中介紹瞭Monorepo的概念、收益以及MulitRepo的弊端。

Q：什麼是pnpm？

A：pnpm就是一個包管理工具，原生支持Monorepo，比npm和yarn更快一些，其他的可以參考官網和另一篇文章：為什麼現在我更推薦 pnpm 而不是 npm/yarn?

🍌 搞一個Monorepo的demo玩玩

現在我們就開始使用pnpm來構建一個Monorepo，在正事開始之前，你先需要保證你的電腦中具有Node.js，我的版本的是16.9.0。

首先你需要有pnpm這個工具，安裝的話可以從官網找方法，或者直接使用npm安裝，命令如下：

npm i pnpm -g

現在我們開始搞事情。

第一步，創建一個項目的根目錄，這裡就叫monorepo-demo，咋創建都可，這裡使用的是命令：

mkdir monorepo-demo

第二步，初始化package.json，這個沒啥說的，命令如下：

pnpm init

這裡我對內容做瞭一點修改，package.json的內容如下：

{
  "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"
}

這裡我主要添加瞭一個type字段，這裡我使用ESModule模塊化規范。

第三步，創建pnpm-workspace.yaml文件，這個文件定義瞭工作空間的根目錄，內容如下：

packages:
  - 'packages/ **'

現在我們就可以在packages中創建多個項目瞭，目錄結構如下：

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

第四步，編寫每個項目的package.json，其實主要是編寫一下名稱，方便以後使用，這裡我的如下：

{
  "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"
  }
}

剩餘的兩個名稱分別為@packages/core和@packages/utils。

其實到這基本工作就準備好瞭，現在介紹一下如何安裝依賴，如何在packageA中引用packageB。

🍋 安裝依賴

就這個demo來說，我們如果在根目錄下安裝依賴的話，這個依賴可以在所有的packages中使用，如果我們需要為具體的一個package安裝依賴怎麼辦？

cd到package的所在目錄嘛？漏，大漏特漏，我們可以通過下面這個命令：

pnpm --filter <package_selector> <command>

例如我們需要在@packages/components安裝lodash，命令如下：

pnpm -F @packages/components add lodash

-F等價於--filter

現在我們在往@packages/utils中安裝一個dayjs，命令如下：

pnpm --filter @packages/utils add dayjs

🍌 packageA中引用packageB

現在我們就來實現package間的相互引用，首先我們在@packages/utils/index.js中寫入如下內容：

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

然後我們執行如下命令：

pnpm -F @packages/components add @packages/utils@*

這個命令表示在@packages/components安裝@packages/utils，其中的@*表示默認同步最新版本，省去每次都要同步最新版本的問題。

安裝完成後@packages/components/package.json內容如下：

{
  "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"
  }
}

然後我們在@packages/components/index.js寫入如下內容：

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

然後我們在項目根目錄運行如下命令

node packages/components

即可打印出當前的日期。

🍍 寫在最後

到這這篇文章就結束瞭，文中的內容比較簡答，可以說僅僅是Monorepo的入門，畢竟隻有，入門之後才能繼續深入學習嘛，更多關於JS pnpm構建Monorepo管理的資料請關註WalkonNet其它相關文章！

推薦閱讀：