pnpm 的 workspace 實現 monorepo 工程

2022 年 8 月 12 日
筆記
React

前言

前端多個包管理的的方式一般都是採用monorepo的方式去管理，之前都是使用的lerna的workspace去管理。這段時間包管理切換到了pnpm上，它也有worksapce,可以支援monorepo。

monorepo

有的小夥伴可能對monorepo不太了解，我們簡單說下：

Monorepo的意思是在版本控制系統的單個程式碼庫里包含了許多項目的程式碼。這些項目雖然有可能是相關的，但通常在邏輯上是獨立的，並由不同的團隊維護。

在前端使用角度來看，monorepo 就是把多個工程放到一個 git 倉庫中進行管理，因此他們可以共享同一套構建流程、程式碼規範也可以做到統一，特別是如果存在模組間的相互引用的情況，查看程式碼、修改bug、調試等會更加方便。

pnpm+workspace

pnpm在這裡我們就不過多介紹，有不了解的小夥伴，可以看下官網pnpm.

創建項目

建一個項目目錄，創建好目錄執行pnpm init,會在根目錄生成一個packaeg.json文件。

2.創建 pnpm-workspace.yaml和.npmrc文件

pnpm-workspace.yaml
- 定義了工作空間的根目錄，並能夠使您從工作空間中包含 / 排除目錄。默認情況下，包含所有子目錄。即使使用了自定義目錄位置通配符，根目錄下的package目錄也總是被包含.
.npmrc
- pnpm 從命令行、環境變數和 .npmrc 文件中獲取其配置。
- pnpm config 命令可用於更新和編輯用戶和全局 .npmrc 文件的內容。
  
  四個相關文件分別為：
  - 每個項目的配置文件（/path/to/my/project/.npmrc）
  - 每個工作區的配置文件（包含 pnpm-workspace.yaml 文件的目錄）
  - 每位用戶的配置文件（ ~/.npmrc ）
  - 全局配置文件（ /etc/npmrc ）
  所有 .npmrc 文件都遵循 INI-formatted 列表，包含 key = value 參數。

在這裡，我們在.npmrc文件配置了，engine-strict=true 結合根目錄的package.json中的 engines 欄位，可以指定運行的 node 版和 pnpm 版

創建packages文件夾，進入目錄創建我們子項目，

lowcode-platform 採用umi創建,感興趣的可以自行去umi官網查看
ui-material 採用阿里的低程式碼物料腳手架創建，感興趣的可以去看lowcode-engine

我們假設把ui-material項目作為基礎庫，讓lowcode-platform去直接引用ui-material庫，

我們可以在根目錄執行 pnpm add ui-material -r --filter lowcode-platform。

執行完成之後，我們就可以在lowcode-platform項目下直接引用改模組，不需要安裝。這裡我們用到了三個命令，分別是add,-r,--filter。具體詳細內容可以參考官網。
- add 命令可以參考：pnpm add
- -r 參數可以參考：pnpm -r, –recursive
- --filter 參數可以參考：過濾

5.接下來，我們可以在根目錄下執行下pnpm i安裝下依賴，配置下啟動腳本

"clean-install": "pnpm clean && rm -rf ./{packages}/*/node_modules node_modules && pnpm i",
"dev": "pnpm -F \"lowcode-platform\" dev",
"build": "pnpm -F \"lowcode-platform\" build",
"dev:ui": "pnpm -F \"ui-material\" lowcode:dev",
"build:ui": "pnpm -F \"ui-material\" lowcode:build",

到這裡就可以了，你可以配置自己比較方便快捷的命令。

結束語

程式碼已上傳的github，如有需要，可自行下載查看

contain

如果你覺得該文章不錯，不妨

1、點贊，讓更多的人也能看到這篇內容

2、關注我，讓我們成為長期關係

3、關注公眾號「前端有話說」，裡面已有多篇原創文章，和開發工具，歡迎各位的關注，第一時間閱讀我的文章

Tags: React