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