從0開始使用pnpm構建一個Monorepo方式管理的demo
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的入門,畢竟只有,入門之後才能繼續深入學習嘛。
- 用ChatGPT學Nginx是一種什麼體驗
- 【好物分享】分享給前端開發的28個資源(網站、軟件、插件),簡直是提高效率必備
- Vite3.0都來了,你還捲動嗎?(Vite3.0新特性一覽)
- 【好物分享】在命令行讀Markdown,這個感覺太舒服了
- 從0開始使用pnpm構建一個Monorepo方式管理的demo
- 我畫了5張腦圖可以讓你快速入門TypeScript
- 我看着MDN文檔,手寫了幾個數組實例方法
- 淺談JavaScript中的特殊函數
- 如何通過SSH配合VSCode收穫超舒適的遠程開發體驗
- CSS的calc函數不會還有人沒有用吧
- 【戲玩算法】12-圖
- 誰説前端不能搞紅黑樹,用這55張圖拿JS一起手撕紅黑樹
- 簡單總結了10個JavaScript代碼優化小tips
- NaiveUI中看起來沒啥用的組件(文字漸變)實現原來這麼簡單
- 面試官讓我用Flex寫色子佈局,我直接給寫了6個
- Vue3 TS Vite NaiveUI搭建一個項目骨架
- 用一萬多字從頭到尾介紹【函數式編程】
- 這8張腦圖幾乎概括了所有的佈局方案,確定不看看嗎?
- 【戲玩算法】07-字典
- 還在console.log一把梭嗎?console還有其他騷操作