monorepo實踐：yarn workspace + vite + typescript + react

前言

最近需要用到多包管理 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 搭建開發構建環境實踐。