前言
最近需要用到多包管理 monorepo 開發新專案，所以提前預研一下專案搭建，
monorepo(monolithic repository)是一種專案架構，就是用一個倉庫管理多個專案（應用，庫），react和babel的原始碼倉庫都是用這種方式在管理，
優缺點略過，可以參考：精讀《Monorepo 的優勢》，
因為不需要 npm 發包之類的，所以沒用 lerna，就用 yarn workspace 就可以解決了，技術組合：yarn workspace + vite + typescript + react，
使用 yarn workspace 管理 monorepo 的依賴包
通過 yarn workspace 可以管理 monorepo 的共同依賴包
使用命令創建一個根目錄專案 workspace
yarn create vite
這樣我們得到一個簡單的基于 vite+react+ts 的腳手架專案，但其實我們只需要package.json、gitignore、tsconfig.json、tsconfig.node.json四個檔案，其他的都刪掉，
在workspace的package.json中加入配置：
"workspaces": [
"packages/*"
],
這樣便可以宣告我們使用 monorepo 的方式管理 packages 下的多個包，
在workspace根目錄下創建 packages 檔案夾，然后在 packages 檔案夾下運行命令
yarn create vite
創建多個子專案，如：@hanzilu/root、@hanzilu/mobile、@hanzilu/common，
此時我們直接在workspace運行命令安裝 root 專案的依賴：
yarn workspace @hanzilu/root install
我們會發現安裝的依賴包直接安裝在了workspace下的node_modules中，而不是在 @hanzilu/root 專案下，
在workspace下運行命令：
yarn workspace @hanzilu/root dev
就可以啟動 root 檔案夾下的專案了，
不過我們不可能一個個去安裝所有子專案，那么就直接在workspace下運行命令即可：
yarn install
更多的一些常用命令：
- yarn workspaces info [--json] 顯示當前各個子專案之間的依賴關系樹
- yarn workspaces add / remove / upgrade [package] 新增、洗掉、更新全域依賴
- yarn workspace [name] add / remove / upgrade [package] 某個子專案新增、洗掉、更新依賴
- yarn worspace [name] [command] 執行某個專案下的命令
通用的 typescript 配置
上面的專案中并不是共用同一個 typescript 配置的，所以我們需要洗掉各個子專案中的tsconfig.json和tsconfig.node.json，
然后我們修改workspace下的tsconfig.json中 include 為：
"include":["packages/**/src"],
也就是把 typescript 配置應用到這個目錄下，
同樣的tsconfig.node.json中的配置改為：
"include": ["packages/**/vite.config.ts"]
對本地依賴專案的處理
我們使用多包管理，可能是兩個不同的專案比如 @hanzilu/root 和@hanzilu/ mobile，想要使用統一的組件或者方法，這個方法在我們的 @hanzilu/common 中，
那么首先改造一下我們的 common 專案,在 package.json 中將添加入口：
"main":"./src/main.tsx",
然后將 main.tsx 內容改為：
const HelloWorld: React.FC = () => {
return <div className="App">HelloWorld</div>;
};
export default HelloWorld;
現在我們的 common 就是個很簡單的 HelloWorld 組件，
那么我們怎么去讓@hanzilu/root 能夠使用到這個組件呢？
我們就像安裝依賴庫一樣運行命令：
yarn workspace @hanzilu/root add @hanzilu/[email protected]
參考的時候也和依賴庫一樣：
import HelloWorld from "@hanzilu/common";
但是到了這一步你的 typescript 提示會報錯，你需要在workspace下的 tsconfig.json 加上這段配置：
"compilerOptions": {
//...
"baseUrl": "./",
"paths": {
"@hanzilu/*": ["packages/*"]
},
}
去告訴 typescript，@hanzilu/系列的包實際上是用的本地的 packages 目錄下的內容，
至此，我們就可以正常進行專案的開發了，
簡化命令列
在進行上面操作的時候，應該會明顯感覺到命令列太長，輸入太繁瑣，
所以我們需要在 package.json 中對常用的命令，進行簡化：
"root": "yarn workspace @hanzilu/root", // 簡化命令
"mobile":"yarn workspace @hanzilu/mobile",
"dev:root": "yarn root dev", // 開發root
"dev:mobile": "yarn mobile dev",
"build:root": "yarn root build", // 構建root
"build:mobile": "yarn mobile build"
總結
總體而言沒遇到什么大問題，挺好用的，可能也跟剛接觸不知坑之深淺有關，
關于 react 和 vite 的部分直接省略了，如果想要了解可以查看我的這篇文章：Vite+React 搭建開發構建環境實踐，
作者：韓子盧出處：https://www.cnblogs.com/vvjiang/
本博客文章均為作者原創，轉載請注明作者和原文鏈接，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/546118.html
標籤：其他
下一篇：創建型-單例模式