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