❝

前言

❞

記錄一下如何使用reference搭建一個一鍵式「開發，管理， 釋出」的「monorepo專案」,

同時如何優化傳統monorepo專案架構痛點的過程。

❝

導航

❞

1. reference(typescript)簡介？
2. 何為monorepo架構， 如何實現一個monorepo的架構
3. 如何基於reference實現一個一鍵式開發， 同時解決現在monorepo架構的痛點？

Typescript--reference

reference簡介

reference(工程引用)是TypeScript 3.0的新特性， 可以結合「tsc --build」同時編譯多個相互關聯的專案。

適用於monorepo架構下的ts專案， 可以只開啟一個服務既可以同時監控所有相關聯的專案變化

reference使用

1. tsconfig.json增加了一個新的頂層屬性references。

   {
       "compilerOptions": {
           // The usual
       },    "references": [
           { "path": "./packages/package1" },        { "path": "./packages/package2" },    ]
   }
   複製程式碼

   注意： 每一個被引用的資料夾下都應該包含一個tsconfig.json

2. 被引用的工程中（如packages/package1）的tsconfig.json中新增composite屬性

3. tsc -b -w --force --verbose命令開始監控所有關聯專案的變化

reference實戰---優化傳統的monorepo架構

monorepo簡介

monorepo是管理程式碼的一種方式， 不同於傳統的一個模組(package)一個倉庫的形式， monorepo是在一個程式碼倉庫下面管理多個相互依賴的package包。

這種方式更容易處理包的依賴和引用， 可以極大的提高開發體檢。

例如這種專案

core
├─templates // 微前端專案模版
|     ├─fino-child-vue // 模版專案1
 

|     ├─fino-child // 模版專案2
|     ├─fino // 模版專案3
├─packages  // 專案依賴npm包
|    ├─finoer-core // package1
|    ├─finoer-component-vue // package2
|    ├─finoer-component-react // package3
├─src
|  └index.ts
├─tsconfig.json
├─rollup.config.js
├─package.json
複製程式碼

packages和template下每個專案都是一個獨立的工程，

同時每個工程都會引用其它的工程， 例如， template下面的fino專案引用了package下面的fino-core專案

monorepo專案痛點

傳統的monorepo專案一般是基於lerna來構建的，使用lerna可以實現一鍵安裝依賴， 一鍵釋出等功能。但是它們依然存在它們的痛點， 比如：

1. 倉庫體積過大。 （此問題我使用了git submodule來解決了）

2. 開發時， 每一個相互引用的package都需要開啟服務監聽變化.

   比如需要開發template1時， template依賴了package1,package2,當同時需要修改這三個包的時候， 需要開啟3個服務。

   隨著工程越來越大， 只會越來越繁瑣

3. 如果直接使用相對路徑來引入依賴的話， 那麼編譯的時候又會把一些不相干的檔案打包進來。

   比如template1使用相對路徑引用了package1,那麼也會把package1裡面的東西編譯進打包目錄。

......

結合reference優化專案架構

1. 容器專案中的tsconfig新增reference屬性， 即根目錄的tsconfig.json下面新增配置references配置

   {
       "compilerOptions": {
           ...
           "rootDir": ".",    },    "files": [],    "references": [
           { "path": "./packages/finoer-core" },        { "path": "./packages/fino-component-vue" },    ]
   }
   複製程式碼

2. 依賴的專案中,tsconfig中新增composite和declaration

   package1/tsconfig.json,monospace; word-break: break-all; color: #595959;">package2/tsconfig.json,monospace; word-break: break-all; color: #595959;">package3/tsconfig.json中分別新增如下配置

   {
     "compilerOptions": {
       "declaration": true,    "declarationDir": "./dist",    "composite": true,  }
   }
   複製程式碼

3. 首先， 我們使用如下命令同時監聽所有依賴的ts專案的變化

   tsc -b -w --force --verbose
   複製程式碼

   之後， 啟動我們本次需要修改的專案

   npm run dev fino-core
   複製程式碼

   這樣只需要兩個服務， 我們既可以監聽monorepo專案下面的所有專案的改變了。

   而不用像之前一樣，需要改幾個專案啟動幾個服務

4. 優化，使用node的concurrently模組即可以在一個視窗程序中，同時執行兩個命令， 開啟兩個服務。

   安裝concurrently

   npm install concurrently --save-dev
   複製程式碼

   package.json中新增如下命令

   {
      "scripts": {
         "template:base": "concurrently \"npm run template fino-base\" \"tsc -b -w --force -  -verbose\"",  },}
   複製程式碼

這樣， 基於ts reference優化後的monorepo架構就完成了， 這樣倉庫體積即不會太大。 同時只使用一個視窗，就可以監聽所有依賴包的變化了。

本文使用 mdnice 排版