簡介
以前用過yarn+lerna管理單一倉庫腿短，實際使用中還是存在不少問題擂啥，pnpm出來以后除了對node_modules管理非常好以為龙誊，對workspace支持也非常好颜说。本項目就是使用father背零、dumi腰吟、pnpm技術棧的React組件單一倉庫模板。
使用這個項目模板根據(jù)下面的說明文檔徙瓶，可以非趁停快速的完成創(chuàng)建包、編寫和展示組件文檔侦镇、構建和發(fā)布到npm倉庫灵疮。
倉庫地址：scfido/pnpm-monorepo: 使用father、dumi壳繁、pnpm技術棧的React組件單一倉庫模板震捣。 (github.com)
使用
安裝依賴
在根目錄執(zhí)行會自動安裝所有項目的依賴包。
pnpm install
清理所有依賴
pnpm clean
清理所有依賴并重新安裝
pnpm reinstall
啟動文檔項目
文檔項目有兩個作用：
- 介紹組件的使用方法
- 組件的功能演示
pnpm start
開發(fā)
創(chuàng)建新包
在這個模板中新添加一個包闹炉，操作流程如下蒿赢，以創(chuàng)建liba為例：
cd .\packages\
mkdir liba
cd liba
pnpm dlx create-father ./
# 根據(jù)提示選擇或輸入你的信息。
# √ Pick target platform(s) ? Browser
# √ Pick NPM client ? pnpm
# √ Input NPM package name ... liba
# √ Input NPM package description ...
# √ Input NPM package author (Name <email@example.com>) ...
包目錄創(chuàng)建好后渣触，添加react組件之前要對項目參數(shù)做一些簡單的配置诉植。
在.\packages\liba\tsconfig.json，的compilerOptions中增加jsx昵观、esModuleInterop晾腔、sourceMap三項參數(shù)。
{
"compilerOptions": {
"strict": true,
"declaration": true,
"skipLibCheck": true,
"baseUrl": "./",
"jsx": "react",
"esModuleInterop": true,
"sourceMap": true
}
}
然后添加你要開發(fā)的組件依賴包
# 添加依賴包react
pnpm add react
添加組件文件.\packages\liba\src\Button.tsx
// .\packages\liba\src\Button.tsx
import React from "react";
export default ()=>{
return(<button>From lib a</button>)
}
導出組件
// .\packages\liba\src\index.ts
export {default as ButtonA} from "./Button"
生成
cd .\packages\liba
pnpm build
生成成功后會在.\packages\liba\dist\esm中看到結果啊犬。
在文檔中展示組件
前面已經(jīng)創(chuàng)建好了包liba灼擂，并創(chuàng)建了組件ButtonA，下面在文檔中展示這個組件觉至。
在.\packages\docs包中剔应，添加liba的應用。
// .\packages\docs\package.json
"dependencies": {
// 添加liba的依賴语御，注意版本號的寫法峻贮。
"liba": "workspace:^1.0.0"
// ... 其它依賴
}
在創(chuàng)建.\packages\docs\src\libA的目錄，并新建展示文檔index.md应闯。
# .\packages\docs\src\libA\index.md
---
nav:
title: Components
path: /components
---
## Libiary A
Button A:
```tsx
import React from 'react';
import {ButtonA} from "liba";
export default () => {
return(
<div>
<ButtonA/>
</div>
)
};
```
啟動文檔項目就能看到liba中的組件展示了纤控。
pnpm start
熱更新
組件展示文檔項目運行起來后，文檔自身的修改是能夠熱更新的碉纺，但是引用的liba包中的組件并不能熱更新船万，修改了組件內容后刻撒，需要在組件目錄運行pnpm build才能生效。要實現(xiàn)組件的熱更新耿导，可以在組件包目錄中使用pnpm dev來監(jiān)視文件變更并自動build声怔。
cd .\packages\liba
pnpm dev
發(fā)布
發(fā)布分為發(fā)布說明文檔和組件兩種情況。
發(fā)布文檔
將文檔發(fā)布成網(wǎng)站舱呻。
pnpm docs:build --filter docs
輸出目錄在packages\docs\docs-dist醋火，這些文件放在web服務中就可以訪問。例如使用dotnet-serve工具箱吕。
# 安裝dotnet-serve
dotnet tool install --global dotnet-serve
# 啟動網(wǎng)站
cd c
dotnet serve -o
發(fā)布組件
發(fā)布組件非常簡單胎撇，和npm的操作流程一致。在根目錄下執(zhí)行pnpm publish即可殖氏。通過npmjs.org用戶注冊等一系列操作發(fā)布成功晚树。完成后發(fā)現(xiàn)并不是我們要的結果，這樣是把整個項目作為單個包發(fā)布出去了雅采。而我們想要的是發(fā)布這三個包爵憎。
- @pnpm-monorepo/liba
- @pnpm-monorepo/libb
- @pnpm-monorepo/libc
其實也非常簡單，使用filter參數(shù)過濾項目婚瓜，或者分別到各自的目錄下去發(fā)布就可以了宝鼓。
# 使用指定項目名稱的方式
pnpm --filter liba publish
pnpm --filter libb publish
pnpm --filter libc publish
# 使用通配符過濾的方式，注意windows下不要單引號巴刻。
pnpm --filter 'lib*' publish
# 進入到項目目錄下發(fā)布的方式
cd .\packages\liba
pnpm publish
cd ..\libb
pnpm publish
cd ..\libc
pnpm publish
或者使用script目錄下的publish.ps1腳本愚铡。
統(tǒng)一包版本
如果希望發(fā)布的所有包版本統(tǒng)一，可使用以下命令胡陪。腳本會自動把packages目錄下的項目設置為指定版本號沥寥，并且會自動添加添加git tag。
./set-version.ps1 1.1.4
引用包
包開發(fā)完成后就是給其它項目使用了柠座，按上面的步驟發(fā)布到npm倉庫后邑雅，按常規(guī)操作用名稱引用即可。
但是在開發(fā)過程中要引用本地包怎么操作呢妈经？分倉庫內和倉庫外兩種引用情況淮野。
倉庫內
在同一倉庫內引用，比如docs項目引用liba吹泡。只需要在docs項目中執(zhí)行添加包命令骤星，并加上-w``--workspace參數(shù)，表面是引用workspace中的包爆哑。
# 中項目根目錄操作需要帶過濾條件
pnpm add liba -w --filter docs
# 進入包的目錄可以直接添加
cd .\packages\docs
pnpm add liba -w
倉庫外
開發(fā)時其它倉庫需要引用本項目的包時洞难，可使用pnpm的link命令。
- 在被引用的倉庫執(zhí)行
# 例如liba是要被引用的庫泪漂，將liba注冊到全局倉庫
cd .\packages\liba
pnpm link . --global
- 在引用的倉庫執(zhí)行
# 從全局倉庫連接 liba
pnpm link liba --global
注意：連接后會在package.json的dependencies中添加liba廊营。如果你的包從來沒有發(fā)布過，以后執(zhí)行install的時候會因為找不到這個包而失敗萝勤。
常見問題
ANTD組件沒有加載CSS
在docs項目中引用ANTD組件露筒，并在文檔中增加樣式引用。
import React from 'react';
import {Button} from "libb";
import 'antd/dist/antd.css';
export default () => {
return(
<div>
<Button/>
</div>
)
};
包修改以后不生效
我發(fā)現(xiàn)包減少輸出文件引用包的node_modules下仍然存在的情況敌卓，建議全部刪除后重新安裝慎式。
pnpm reinstall
報找不到引用包的文件
docs項目生成報找不到引用包的文件，并且錯誤信息中的文件位置在docs/src目錄下趟径，這是因為引用包編譯失敗瘪吏，沒有輸出到docs的node_modules中，因為docs在tsconfig.josn中重定義了@/*:["src/*"]蜗巧，所以不要被編譯錯誤中的文件位置誤導了掌眠。
