您好,登錄后才能下訂單哦!
今天小編給大家分享一下JS前端架構(gòu)pnpm怎么構(gòu)建Monorepo方式管理demo的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來(lái)了解一下吧。
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?
現(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ě)一下名稱,方便以后使用,這里我的如下:
{ "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è)名稱分別為@packages/core
和@packages/utils
。
其實(shí)到這基本工作就準(zhǔn)備好了,現(xiàn)在介紹一下如何安裝依賴,如何在packageA中引用packageB。
就這個(gè)demo來(lái)說(shuō),我們?nèi)绻诟夸浵掳惭b依賴的話,這個(gè)依賴可以在所有的packages中使用,如果我們需要為具體的一個(gè)package安裝依賴怎么辦?
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
現(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)前的日期。
以上就是“JS前端架構(gòu)pnpm怎么構(gòu)建Monorepo方式管理demo”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。