pnpm workspace管理monorepo項(xiàng)目使用過(guò)程詳解
本文記錄使用 monorepo 方案 pnpm workspace 的過(guò)程。
monorepo
首先要清楚，為什么要用到 monorepo？對(duì)于我來(lái)說(shuō)，手上負(fù)責(zé)公司內(nèi)部的多個(gè)項(xiàng)目，其中除了業(yè)務(wù)模塊單獨(dú)使用外，例如系統(tǒng)管理、中間庫(kù)、工具等都是共用的。
而在開(kāi)發(fā)的過(guò)程中，共用的模塊想要添加或修改，為了保持多項(xiàng)目一致性，那么就需要不斷地復(fù)制粘貼，這個(gè)過(guò)程不說(shuō)有多繁瑣，還有可能造成依賴錯(cuò)誤。
為了解決這個(gè)問(wèn)題，對(duì)比了 learn+yarn / npm 等方案后，決定采用 pnpm workspace 方案對(duì)項(xiàng)目進(jìn)行管理。
下面將通過(guò)一個(gè)例子初步學(xué)會(huì) pnpm workspace。
隨便找個(gè)文件夾創(chuàng)建 workspace 項(xiàng)目
D: && cd project/monorepo mkdir demo2 && cd demo2
新建 pnpm-workspace.yaml 文件并填入相關(guān)內(nèi)容以啟用 workspace
packages: - packages/* - apps/* - demo
首行 packages 代表 workspace 包，且該 workspace 由以下項(xiàng)目組成；而帶有 - 前綴的字符串，代表項(xiàng)目目錄，具體可通過(guò) pnpm 官方文檔查看
完善項(xiàng)目目錄及包配置
現(xiàn)在的文件夾應(yīng)當(dāng)只有一個(gè) pnpm-workspace.yaml 文件，接下來(lái)我們手動(dòng)添加相關(guān)文件/文件夾和配置
新建相關(guān)文件夾
mkdir packages && cd packages mkdir components utils hooks space-play cd .. && mkdir apps && cd apps && mkdir play1
為文件夾新建 package.json 文件
// ./package.json
{
"description": "A pnpm workspace example."
}
// ./packages/components/package.json
{
"name": "@space-play/components",
"version": "0.0.1"
}
// ./packages/utils/package.json
{
"name": "@space-play/utils",
"version": "0.0.1"
}
// ./packages/hooks/package.json
{
"name": "@space-play/hooks",
"version": "0.0.1"
}
// ./packages/space-play/package.json
{
"name": "space-play",
"version": "0.0.1"
}
// ./apps/play1/package.json
{
"name": "play1",
"version": "0.0.1"
}可以從上面的內(nèi)容中看出， packages 文件夾里面除了 space-play 的 package.json 文件，其他文件夾里面的 name 命名都帶有一個(gè) @space-play 前綴，那么這個(gè)是什么意思呢？這是代表 npm 發(fā)包后的安裝命名，也代表這些包都?xì)w屬于 space-play 包。
此時(shí)的項(xiàng)目目錄應(yīng)該是這樣的：
demo2 | apps | play1 | package.json | packages | components | package.json | hooks | package.json | utils | package.json | space-play | package.json | pnpm-workspace.yaml | package.json
一個(gè)簡(jiǎn)陋的 monorepo 已經(jīng)完成，通過(guò)相關(guān) pnpm add 指令，我們可以進(jìn)行本地包的調(diào)用。
例如我們想要在 apps/play1 包里調(diào)用所有的本地包，可以先在 space-play 包里安裝其它本地包，再安裝該包行。
嘗試一下：
在 workspace 里查找 packages/space-play，并在該包里安裝 @space-play/components @space-play/hooks @space-play/utils 等依賴包
pnpm -r --filter ./packages/space-play add @space-play/components @space-play/hooks @space-play/utils
在 space-play 新建 index.ts 文件夾并導(dǎo)出所有依賴包
// packages/space-play/index.ts
import type { App } from 'vue'
export * from '@space-play/components'
export * from '@space-play/hooks'
export * from '@space-play/utils'
export default {
install(app: App) {
console.log('已使用 space-play 包，但該包里什么都沒(méi)有')
},
version: '0.0.1' // 這里只是作為示例，實(shí)際應(yīng)該獲取 package.json 里的版本
}到 apps/play1 里使用 space-play 包
pnpm -r --filter ./apps/play1 add space-play
在 apps/play1 新建一個(gè)簡(jiǎn)單的項(xiàng)目結(jié)構(gòu)并安裝相關(guān)依賴
demo1/apps/play1 | app.vue | index.html | index.ts | package.json | vite.config.ts
可以看到，這個(gè)項(xiàng)目里面用到 vue、vite，這兩個(gè)依賴在 monorepo 里面的其它項(xiàng)目包里都會(huì)用到，所以我們?cè)诟夸浝锩孢M(jìn)行安裝，同時(shí)安裝 vite 解析 vue 的插件
pnpm add -w vue pnpm add -w -D vite @vitejs/plugin-vue
可以看到這里用了兩條命令并在第二條命令中多了個(gè) -D 參數(shù)，因?yàn)?nbsp;vite 在編譯后不需要，而 vue 是需要的，所以一個(gè)安裝在常用依賴，一個(gè)開(kāi)發(fā)依賴
打開(kāi) ./apps/play1/package.json，對(duì)他加點(diǎn)料，文件內(nèi)原本的參數(shù)不動(dòng)，這里只顯示添加的，后續(xù)也如此
{
...,
"scripts": {
"dev": "vite"
}
}文件 app.vue 和 index.html
<!-- app.vue -->
<template>
<div>打開(kāi)了 app.vue</div>
</template>
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./index.ts"></script>
</body>
</html>文件 apps/play1/index.ts 和普通 vue 項(xiàng)目的 main.ts 基本一致
import { createApp } from 'vue'
import SpacePlay from 'space-play'
import App from './app.vue'
createApp(App).use(SpacePlay).mount('#app')文件 apps/play1/vite.config.ts 和普通 vue 項(xiàng)目的 main.ts 基本一致
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()],
});到這里，一個(gè)基于 pnpm workspace 的 monorepo 項(xiàng)目基本完成，剩下的不過(guò)是在該項(xiàng)目?jī)?nèi)的填充。
注意！項(xiàng)目目前還不能夠正常運(yùn)行，因?yàn)樵?nbsp;packages/components packages/hooks packages/utils 還沒(méi)有新建 index.ts 文件并這這些目錄下的 package.json 配置 main 入口
如果你在上面過(guò)程中發(fā)現(xiàn)了這個(gè)問(wèn)題并手動(dòng)創(chuàng)建并配置了，那么完成根目錄的 scripts 配置后就可以運(yùn)行項(xiàng)目試試效果了。
{
...,
"scripts": {
"play1": "pnpm -C apps/play1 dev"
}
}pnpm run play1 ? Local: http://localhost:5173/
通過(guò)瀏覽器打開(kāi)，我們可以看到頁(yè)面顯示符合預(yù)期的內(nèi)容
以上就是pnpm workspace管理monorepo項(xiàng)目使用過(guò)程詳解的詳細(xì)內(nèi)容，更多關(guān)于pnpm workspace管理monorepo的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
使用async、enterproxy控制并發(fā)數(shù)量的方法詳解
并發(fā)相信對(duì)大家來(lái)說(shuō)都不陌生，這篇文章主要給大家介紹了關(guān)于使用async、enterproxy控制并發(fā)數(shù)量的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
簡(jiǎn)單了解node npm cnpm的具體使用方法
這篇文章主要介紹了簡(jiǎn)單了解node npm cnpm的具體使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要介紹了Node.js使用Angular簡(jiǎn)單示例，如何在Node.js項(xiàng)目中引入AngularJS，這次提供一個(gè)非常簡(jiǎn)單的示例，演示AngularJS里的指令、數(shù)據(jù)綁定、服務(wù)等內(nèi)容。感興趣的小伙伴們可以參考一下2018-05-05
Node.js中Request模塊處理HTTP協(xié)議請(qǐng)求的基本使用教程
這篇文章主要介紹了Node.js中Request模塊處理HTTP請(qǐng)求的基本使用教程,request也支持OAuth的簽名請(qǐng)求,很好很強(qiáng)大,需要的朋友可以參考下2016-03-03
nodejs環(huán)境快速操作mysql數(shù)據(jù)庫(kù)的方法詳解
這篇文章主要介紹了nodejs環(huán)境快速操作mysql數(shù)據(jù)庫(kù)的方法詳解,需要的朋友可以參考下2021-03-03
node打造微信個(gè)人號(hào)機(jī)器人的方法示例
這篇文章主要介紹了node打造微信個(gè)人號(hào)機(jī)器人的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
nodeJS中關(guān)于path.resolve()的用法解析
這篇文章主要介紹了nodeJS中關(guān)于path.resolve()的用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
本文主要介紹了node連接redis的方法實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
Node.js實(shí)現(xiàn)簡(jiǎn)單聊天服務(wù)器
Node.js 是一個(gè)基于Chrome JavaScript運(yùn)行時(shí)建立的一個(gè)平臺(tái)， 用來(lái)方便地搭建快速的，易于擴(kuò)展的網(wǎng)絡(luò)應(yīng)用，今天我們來(lái)探討下，如何使用node.js實(shí)現(xiàn)簡(jiǎn)單的聊天服務(wù)器2014-06-06
node.js請(qǐng)求HTTPS報(bào)錯(cuò)：UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解決方法
最近在工作中遇到一個(gè)問(wèn)題，node.js請(qǐng)求HTTPS時(shí)報(bào)錯(cuò)：Error: UNABLE_TO_VERIFY_LEAF_SIGNATURE\，通過(guò)查找網(wǎng)上的一些資料找到了解決方法，現(xiàn)在總結(jié)下分享給大家，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-12-12