pnpm 的 workspace 實現 monorepo 工程

前言

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

monorepo

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

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

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

pnpm+workspace

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

建立專案

1. 建一個專案目錄，建立好目錄執行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 版

3. 建立packages資料夾，進入目錄建立我們子專案，

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

4. 我們假設把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、關注公眾號「前端有話說」，裡面已有多篇原創文章，和開發工具，歡迎各位的關注，第一時間閱讀我的文章