Vue3從0搭建Monorepo項目組件庫
引言
本篇文章是從0搭建Vue3組件庫系列文章第二篇,本篇文章將帶領(lǐng)大家使用pnpm搭建一個簡單的Monorepo項目,并完成包的關(guān)聯(lián)與測試
什么是 Monorepo
其實很簡單,就是一個代碼庫里包含很多的項目,而這些項目雖然是相關(guān)聯(lián)的,但是在邏輯上是獨立的,可以由不同人或者團隊來維護
為什么要用 pnpm
pnpm 對于包的管理是很方便的,尤其是對于一個 Monorepo 的項目。因為對于我們即將開發(fā)的組件庫來說可能會存在多個 package(包),而這些包在我們本地是需要相互關(guān)聯(lián)測試的,剛好 pnpm 就對其天然的支持。其實像其它包管理工具,比如 yarn、lerna 等也能做到,但是相對來說比較繁瑣。而 pnpm 現(xiàn)在已經(jīng)很成熟了,像 Vant,ElementUI 這些明星組件庫都在使用 pnpm,因此本項目也采用 pnpm 作為包管理工具。
pnpm 的使用
安裝
npm install pnpm -g
初始化項目
在項目根目錄執(zhí)行 pnpm init
,會自動生成package.json
文件
{ "name": "easyest", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
包管理
我們新建一個 packages 文件夾用于后續(xù)來存放我們的各種包。假如我們有了 a 包和 b 包,在 packages 下新建 a 和 b(這里用于測試 pnpm 的本地引用),然后分別在 a 和 b 目錄下執(zhí)行pnpm init
初始化
這里需要改一下包名,我這里將 name 改成@easyest/a 表示這個 a 包是屬于 easyest 這個組織下的。所以記住發(fā)布之前要登錄 npm 新建一個組織;例如 easyest。比如此時 a 的 package.json
{ "name": "@easyest/a", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
這里我們的 a 包代表工具包,而 package.json 的 main 屬性就是包的入口即 index.js。
所以在 a 目錄下新建 index.js
export default () => { console.log("我是@easyest/a包"); };
然后在 b 包下新建 index.js 進(jìn)行引用
import sayHello from "@easyest/a"; sayHello();
p>我們用到了 a 包,所以需要先安裝 a,在 B 目錄下執(zhí)行pnpm add @easyest/a
,顯然這樣會報錯的,因為我們還沒有將兩個包進(jìn)行關(guān)聯(lián),那么如何進(jìn)行關(guān)聯(lián)呢,其實很簡單
在根目錄新建 pnpm 的工作區(qū)文件 pnpm-workspace.yaml 就可以將包進(jìn)行關(guān)聯(lián)
packages: - 'packages/**'
這樣就表示 packages 目錄下的所有包都被關(guān)聯(lián)了,然后再執(zhí)行pnpm add @easyest/a
注意這里我們使用了 import es6 語法,所以我們要在 A 和 B 的package.json
中新增字段"type": "module"
我們會發(fā)現(xiàn)直接在 b 目錄的 node_modules 出現(xiàn)了 a 的軟鏈接。同時,b的package.json的依賴字段多了"@easyest/a": "workspace:^1.0.0"
,這就表示已經(jīng)關(guān)聯(lián)到本地的@easyest/a
包了
這時候我們在 b 目錄下執(zhí)行
node index.js
此時我們便完成了本地包的關(guān)聯(lián),以后進(jìn)行包的測試就變得更加方便了
本篇文章代碼地址
以上就是Vue3從0搭建Monorepo項目組件庫的詳細(xì)內(nèi)容,更多關(guān)于Vue3搭建Monorepo組件庫的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue實踐---根據(jù)不同環(huán)境,自動轉(zhuǎn)換請求的url地址操作
這篇文章主要介紹了vue實踐---根據(jù)不同環(huán)境,自動轉(zhuǎn)換請求的url地址操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09Element樹形控件el-tree懶加載并設(shè)置默認(rèn)展開和選中的效果
本文主要介紹了Element樹形控件el-tree懶加載并設(shè)置默認(rèn)展開和選中的效果,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01基于Echarts圖表在div動態(tài)切換時不顯示的解決方式
這篇文章主要介紹了基于Echarts圖表在div動態(tài)切換時不顯示的解決方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07elementUI實現(xiàn)下拉選項加多選框的示例代碼
因產(chǎn)品需求和UI樣式調(diào)整,本文主要實現(xiàn)elementUI下拉選項加多選框的示例代碼,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-10-10Vue實現(xiàn)具備掃描和查看數(shù)據(jù)的二維碼
在我們生活中,二維碼的應(yīng)用越來越廣泛,特別是在移動互聯(lián)網(wǎng)的時代,二維碼成為了快速傳達(dá)信息的一種利器,本文我們就來看看如何在Vue框架下,實現(xiàn)一個具備掃描和查看數(shù)據(jù)的二維碼吧2023-05-05