從0開始使用pnpm構建一個Monorepo方式管理的demo

語言: CN / TW / HK

theme: fancy highlight: atom-one-light


持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第30天,點選檢視活動詳情

Hi~,我是一碗周,如果寫的文章有幸可以得到你的青睞,萬分有幸~

🍍 寫在前面

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安裝,命令如下:

powershell npm i pnpm -g

現在我們開始搞事情。

第一步,建立一個專案的根目錄,這裡就叫monorepo-demo,咋建立都可,這裡使用的是命令:

powershell mkdir monorepo-demo

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

powershell pnpm init

這裡我對內容做了一點修改,package.json的內容如下:

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檔案,這個檔案定義了工作空間的根目錄,內容如下:

```yaml packages: - 'packages/ **'

```

現在我們就可以在packages中建立多個專案了,目錄結構如下:

text 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,其實主要是編寫一下名稱,方便以後使用,這裡我的如下:

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的所在目錄嘛?漏,大漏特漏,我們可以通過下面這個命令:

powershell pnpm --filter <package_selector> <command>

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

powershell pnpm -F @packages/components add lodash

-F等價於--filter

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

powershell pnpm --filter @packages/utils add dayjs

🍌 packageA中引用packageB

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

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

然後我們執行如下命令:

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

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

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

```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寫入如下內容:

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

```

然後我們在專案根目錄執行如下命令

powershell node packages/components

即可打印出當前的日期。

🍍 寫在最後

到這這篇文章就結束了,文中的內容比較簡答,可以說僅僅是Monorepo的入門,畢竟只有,入門之後才能繼續深入學習嘛。