快捷導(dǎo)航

Vue3從0搭建Monorepo項(xiàng)目組件庫(kù)

更新時(shí)間：2023年02月17日 15:13:57 作者：東方小月

這篇文章主要為大家介紹了Vue3從0搭建Monorepo項(xiàng)目組件庫(kù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

本篇文章是從0搭建Vue3組件庫(kù)系列文章第二篇,本篇文章將帶領(lǐng)大家使用pnpm搭建一個(gè)簡(jiǎn)單的Monorepo項(xiàng)目,并完成包的關(guān)聯(lián)與測(cè)試

什么是 Monorepo

其實(shí)很簡(jiǎn)單,就是一個(gè)代碼庫(kù)里包含很多的項(xiàng)目,而這些項(xiàng)目雖然是相關(guān)聯(lián)的,但是在邏輯上是獨(dú)立的,可以由不同人或者團(tuán)隊(duì)來(lái)維護(hù)

為什么要用 pnpm

pnpm 對(duì)于包的管理是很方便的,尤其是對(duì)于一個(gè) Monorepo 的項(xiàng)目。因?yàn)閷?duì)于我們即將開發(fā)的組件庫(kù)來(lái)說可能會(huì)存在多個(gè) package(包),而這些包在我們本地是需要相互關(guān)聯(lián)測(cè)試的,剛好 pnpm 就對(duì)其天然的支持。其實(shí)像其它包管理工具,比如 yarn、lerna 等也能做到,但是相對(duì)來(lái)說比較繁瑣。而 pnpm 現(xiàn)在已經(jīng)很成熟了,像 Vant，ElementUI 這些明星組件庫(kù)都在使用 pnpm,因此本項(xiàng)目也采用 pnpm 作為包管理工具。

pnpm 的使用

安裝

npm install pnpm -g

初始化項(xiàng)目

在項(xiàng)目根目錄執(zhí)行 pnpm init,會(huì)自動(dòng)生成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"
}

包管理

我們新建一個(gè) packages 文件夾用于后續(xù)來(lái)存放我們的各種包。假如我們有了 a 包和 b 包,在 packages 下新建 a 和 b(這里用于測(cè)試 pnpm 的本地引用),然后分別在 a 和 b 目錄下執(zhí)行pnpm init初始化

這里需要改一下包名，我這里將 name 改成@easyest/a 表示這個(gè) a 包是屬于 easyest 這個(gè)組織下的。所以記住發(fā)布之前要登錄 npm 新建一個(gè)組織；例如 easyest。比如此時(shí) 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,顯然這樣會(huì)報(bào)錯(cuò)的,因?yàn)槲覀冞€沒有將兩個(gè)包進(jìn)行關(guān)聯(lián),那么如何進(jìn)行關(guān)聯(lián)呢,其實(shí)很簡(jiǎ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 語(yǔ)法,所以我們要在 A 和 B 的package.json中新增字段"type": "module"

我們會(huì)發(fā)現(xiàn)直接在 b 目錄的 node_modules 出現(xiàn)了 a 的軟鏈接。同時(shí),b的package.json的依賴字段多了"@easyest/a": "workspace:^1.0.0",這就表示已經(jīng)關(guān)聯(lián)到本地的@easyest/a包了