?? 寫(xiě)在前面

Monorepo這個(gè)詞你應(yīng)該不止一次聽(tīng)說(shuō)了，像Vue3、Vite、ElementPlus等優(yōu)秀開(kāi)源項(xiàng)目都是使用Monorepo的方式管理項(xiàng)目，且這里說(shuō)到的這幾個(gè)項(xiàng)目都是采用pnpm作為包管理工具。

這篇文章就使用pnpm構(gòu)建一個(gè)簡(jiǎn)單的Monorepo方式管理的項(xiàng)目。

?? 什么是Monorepo？什么是pnpm？

Q：什么是Monorepo？

A：Monorepo是一種項(xiàng)目管理方式，就是把多個(gè)項(xiàng)目放在一個(gè)倉(cāng)庫(kù)里面，可以參考神三元大佬的一篇文章：現(xiàn)代前端工程為什么越來(lái)越離不開(kāi) Monorepo?，這篇文章中介紹了Monorepo的概念、收益以及MulitRepo的弊端。

Q：什么是pnpm？

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

?? 搞一個(gè)Monorepo的demo玩玩

現(xiàn)在我們就開(kāi)始使用pnpm來(lái)構(gòu)建一個(gè)Monorepo，在正事開(kāi)始之前，你先需要保證你的電腦中具有Node.js，我的版本的是16.9.0。

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

npm i pnpm -g

現(xiàn)在我們開(kāi)始搞事情。

第一步，創(chuàng)建一個(gè)項(xiàng)目的根目錄，這里就叫monorepo-demo，咋創(chuàng)建都可，這里使用的是命令：

mkdir monorepo-demo

第二步，初始化package.json，這個(gè)沒(méi)啥說(shuō)的，命令如下：

pnpm init

這里我對(duì)內(nèi)容做了一點(diǎn)修改，package.json的內(nèi)容如下：

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

這里我主要添加了一個(gè)type字段，這里我使用ESModule模塊化規(guī)范。

第三步，創(chuàng)建pnpm-workspace.yaml文件，這個(gè)文件定義了工作空間的根目錄，內(nèi)容如下：

packages:
  - 'packages/ **'

現(xiàn)在我們就可以在packages中創(chuàng)建多個(gè)項(xiàng)目了，目錄結(jié)構(gòu)如下：

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

第四步，編寫(xiě)每個(gè)項(xiàng)目的package.json，其實(shí)主要是編寫(xiě)一下名稱(chēng)，方便以后使用，這里我的如下：

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

剩余的兩個(gè)名稱(chēng)分別為@packages/core和@packages/utils。

其實(shí)到這基本工作就準(zhǔn)備好了，現(xiàn)在介紹一下如何安裝依賴(lài)，如何在packageA中引用packageB。

?? 安裝依賴(lài)

就這個(gè)demo來(lái)說(shuō)，我們?nèi)绻诟夸浵掳惭b依賴(lài)的話，這個(gè)依賴(lài)可以在所有的packages中使用，如果我們需要為具體的一個(gè)package安裝依賴(lài)怎么辦？

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

pnpm --filter <package_selector> <command>

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

pnpm -F @packages/components add lodash

-F等價(jià)于--filter

現(xiàn)在我們?cè)谕?code>@packages/utils中安裝一個(gè)dayjs，命令如下：

pnpm --filter @packages/utils add dayjs

?? packageA中引用packageB

現(xiàn)在我們就來(lái)實(shí)現(xiàn)package間的相互引用，首先我們?cè)?code>@packages/utils/index.js中寫(xiě)入如下內(nèi)容：

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

然后我們執(zhí)行如下命令：

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

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

安裝完成后@packages/components/package.json內(nèi)容如下：

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

然后我們?cè)?code>@packages/components/index.js寫(xiě)入如下內(nèi)容：

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

然后我們?cè)陧?xiàng)目根目錄運(yùn)行如下命令

node packages/components

即可打印出當(dāng)前的日期。

?? 寫(xiě)在最后

到這這篇文章就結(jié)束了，文中的內(nèi)容比較簡(jiǎn)答，可以說(shuō)僅僅是Monorepo的入門(mén)，畢竟只有，入門(mén)之后才能繼續(xù)深入學(xué)習(xí)嘛，更多關(guān)于JS pnpm構(gòu)建Monorepo管理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論