目的

• 聚焦開(kāi)源官網(wǎng)開(kāi)發(fā)，分享從 0 到 1 的官網(wǎng)開(kāi)發(fā)實(shí)踐經(jīng)驗(yàn)
• 作為一個(gè)系列文章開(kāi)頭，不定期分享我在開(kāi)源實(shí)踐方面的總結(jié)和經(jīng)驗(yàn)，歡迎關(guān)注

內(nèi)容

文章主要介紹以下內(nèi)容：

• 需求、設(shè)計(jì)、實(shí)現(xiàn)思路
• 技術(shù)選型：pnpm + turbo + vue3 + ts + vite + vitepress + 服務(wù)端( node | go ) + vercel
• 技術(shù)架構(gòu)
• 構(gòu)建部署
• 預(yù)覽與源碼
• 開(kāi)源實(shí)踐總結(jié)、附（文中提及名詞地址）

需求

給開(kāi)源項(xiàng)目 Monibuca 換官網(wǎng)，包含以下功能：

• 官網(wǎng)首頁(yè)：Monibuca 的主頁(yè)
• 文檔教程頁(yè)：Monibuca 的使用文檔
• 后端服務(wù)：提供 go 包下載轉(zhuǎn)發(fā)

Monibuca 是什么？

Monibuca 是開(kāi)源 Go 語(yǔ)言流媒體服務(wù)器開(kāi)發(fā)框架。如下圖所示：

ui 設(shè)計(jì)

ui 這塊， 有團(tuán)隊(duì)中的設(shè)計(jì)朋友在幫忙設(shè)計(jì)官網(wǎng) pc 首頁(yè)，其他的如文檔教程頁(yè)、移動(dòng)端自適應(yīng)等功能，則自行開(kāi)發(fā)實(shí)現(xiàn)。

設(shè)計(jì)稿如下圖所示：

主要設(shè)計(jì)內(nèi)容如下：

• 整體分為 【導(dǎo)航 + banner + 內(nèi)容 + 底部】 四個(gè) ui 模塊
• 整體版心固定為 1200px
• banner 版心固定為 1400px

這期間，我們和設(shè)計(jì)師保持溝通，首頁(yè) ui 的設(shè)計(jì)，是一個(gè)不斷溝通和調(diào)整的過(guò)程。

自適應(yīng)方案

pc 的自適應(yīng)方案不只一種，瀏覽了一些主流官網(wǎng)，最終確定的自適應(yīng)方案如下：

• 大屏幕（電腦）采用固定版心寬度，版心寬度 1200px 基本可以保證最小電腦屏幕能夠完整展示出來(lái)
• 不做 rem 適配，使用媒體查詢進(jìn)行小屏幕（ pad 、 手機(jī)等）適配

提個(gè)問(wèn)題， 為什么 PC 頁(yè)面基本都不用 rem ？

實(shí)現(xiàn)思路

實(shí)現(xiàn)思路體現(xiàn)著平衡哲學(xué)。

這里有一個(gè)前置考慮，那就是實(shí)現(xiàn)的代價(jià)，主要代價(jià)如下：

• 代價(jià)大：功能全部從 0 開(kāi)發(fā)（掌控感更好，但費(fèi)時(shí)費(fèi)力），采用最前沿技術(shù)（利于學(xué)習(xí)成長(zhǎng)，但難度大）
• 代價(jià)?。阂徊糠止δ軓?0 開(kāi)發(fā)，一部分功能站在開(kāi)源的肩膀上，采用前沿技術(shù)

非全職維護(hù)開(kāi)源項(xiàng)目，既自由，又不自由，這里不自由主要體現(xiàn)在時(shí)間和精力的投入有限，所以綜合考慮下，選擇代價(jià)小的方案。

隨后，我有目的的瀏覽了一些官網(wǎng)，在綜合比較下，感覺(jué) vue 的官網(wǎng)整體不錯(cuò)。隨后閱讀了 vue 官網(wǎng)的源碼，結(jié)合實(shí)現(xiàn)代價(jià)，定下了實(shí)現(xiàn)思路：

• 技術(shù)選型在整體上和 vue 官網(wǎng)保持一致，如 vitepress 、 vite 、 vue
• vitepress 主題使用 vue 主題進(jìn)行二次開(kāi)發(fā)，并使用 pnpm workspace 進(jìn)行管理
• 構(gòu)建使用 pnpm 、 turbo 、 vite 三者結(jié)合，將構(gòu)建性能最大化
• 部署使用 vercel 綁定 github 項(xiàng)目，實(shí)現(xiàn)靜態(tài)頁(yè)面和服務(wù)端端的自動(dòng)化部署

技術(shù)選型

實(shí)現(xiàn)思路確定后，整體技術(shù)選型也隨之確定，即如下：

技術(shù)選型 = pnpm + turbo + vue3 + ts + vite + vitepress + 服務(wù)端(node | go) + vercel

處了服務(wù)端，上述選型和 vue 官網(wǎng)的選型保持一致（整體理由），下面我會(huì)簡(jiǎn)要介紹各技術(shù)選型理由：

pnpm + turbo

目前的 monorepo 生態(tài)百花齊放，正確的實(shí)踐方法應(yīng)該是集大成法，也就是取各家之長(zhǎng)，目前的趨勢(shì)也是如此，各開(kāi)源 monorepo 工具達(dá)成默契，專注自己擅長(zhǎng)的能力。

如 pnpm 擅長(zhǎng)依賴管理， turbo 擅長(zhǎng)構(gòu)建任務(wù)編排。遂在 monorepo 技術(shù)選型上，我選擇了 pnpm 和 turbo 。

pnpm 理由如下：

• 目前最好的包管理工具， pnpm 吸收了 npm 、 yarn 、 lerna 等主流工具的精華，并去其糟粕。
• 生態(tài)、社區(qū)活躍且強(qiáng)大
• 結(jié)合 workspace 可以完成 monorepo 最佳設(shè)計(jì)和實(shí)踐
• 在管理多項(xiàng)目的包依賴、代碼風(fēng)格、代碼質(zhì)量、組件庫(kù)復(fù)用等場(chǎng)景下，表現(xiàn)出色
• 在框架、庫(kù)的開(kāi)發(fā)、調(diào)試、維護(hù)方面，表現(xiàn)出色

相比于 vue 官網(wǎng)，在使用 pnpm 上，我加了 workspace 。

turbo 理由如下：

• 它是一個(gè)高性能構(gòu)建系統(tǒng)，擁有增量構(gòu)建、云緩存、并行執(zhí)行、運(yùn)行時(shí)零開(kāi)銷、任務(wù)管道、精簡(jiǎn)子集等特性
• 具有非常優(yōu)秀的任務(wù)編排能力，可以彌補(bǔ) pnpm 在任務(wù)編排上的短板

vue3 + ts

vue3 理由如下：

• 2022年，使用 vue3 是必然趨勢(shì)（vue 技術(shù)棧）

ts 理由如下：

• 當(dāng)今，使用 ts 對(duì)你來(lái)說(shuō)，是百利而無(wú)一害。
• 用 ts 可以幫助你更好的去接觸和使用其他語(yǔ)言，如 go 、 kotlin 等

vite

大家已不陌生。

理由如下：

• 生態(tài)社區(qū)活躍且強(qiáng)大
• 極速的服務(wù)啟動(dòng)、輕量快速的熱重載、功能豐富
• 下一代前端開(kāi)發(fā)與構(gòu)建工具

vitepress

理由如下：

• 極簡(jiǎn)主義，提供創(chuàng)作文檔所需的最低限度的功能，其他功能全部在主題完成
• 底層使用 vue3 + vite ，性能更好
• 更喜歡 JavaScript API 而不是文件布局約定

我贊同 vitepress 的設(shè)計(jì)理念，目前 Monibuca 官網(wǎng)主題的實(shí)現(xiàn)方案是：

fork @vue/theme 源碼 并用 pnpm 進(jìn)行管理和二次開(kāi)發(fā)，然后慢慢演化成屬于 Monibuca 的主題。

vitepress 官網(wǎng)：vitepress.vuejs.org/^[1]

服務(wù)端 node | go

node 理由如下：

• node 是專屬前端的后端武器，同時(shí)也能和 pnpm workspace 完美兼容

go 理由如下

• go 是目前非?；鸬恼Z(yǔ)言，也是前端突破 node 在服務(wù)端的發(fā)展限制的一條康莊大道

這里我使用的 vercel 提供的 serverless api ，方便快速。

技術(shù)選型總結(jié)

至此，技術(shù)選型就介紹完了，上面闡述的技術(shù)選型，既有主流成熟、也有前沿趨勢(shì)，整體上是一個(gè)不錯(cuò)的方案。

當(dāng)前構(gòu)建過(guò)程，技術(shù)選型的趨勢(shì)是什么？

筆者認(rèn)為，目前前端的構(gòu)建工具鏈已經(jīng)在快速被 Rust 和 Go 接管。如 swc 、 vite 、 vitest 、 turbo , 速度之快，令人驚嘆。這也對(duì)前端工程師提出了更高的要求，激勵(lì)我們學(xué)無(wú)止境。

技術(shù)選型確定后，已經(jīng)開(kāi)發(fā)并維護(hù)一段時(shí)間，還可以對(duì)技術(shù)選型進(jìn)行調(diào)整嗎？

當(dāng)然可以，自信點(diǎn)，把嗎字去掉。

在架構(gòu)設(shè)計(jì)中，有一個(gè)原則叫演化原則，演化優(yōu)于一步到位，好的軟件，一定會(huì)不斷的進(jìn)行演化，這和人類的演化，地球的演化，宇宙的演化都是一脈相承的。自然法則，大道至簡(jiǎn)。

提到架構(gòu)，那下面我將闡述官網(wǎng)的技術(shù)架構(gòu)，請(qǐng)跟我一起往下看。

技術(shù)架構(gòu)

三個(gè)原則

架構(gòu)設(shè)計(jì)有以下三個(gè)重要原則：

• 合適原則：合適優(yōu)于業(yè)界領(lǐng)先
• 簡(jiǎn)單原則：簡(jiǎn)單優(yōu)于復(fù)雜
• 演化原則：演化優(yōu)于一步到位

也就是說(shuō)，大家在做架構(gòu)設(shè)計(jì)的時(shí)候，要有意識(shí)的讓架構(gòu)符合這三個(gè)原則，這樣會(huì)保證你的架構(gòu)設(shè)計(jì)至少在大方向上是保持正確的。

常用軟件架構(gòu)

這里提下常用的 4 種軟件架構(gòu)：

• 分層架構(gòu)：如網(wǎng)絡(luò)七層協(xié)議、 MVX 模式 、 DDD 、都體現(xiàn)了分層架構(gòu)思想
• 插件架構(gòu)：如開(kāi)源項(xiàng)目 VSCode 、 Vue 、 Monibuca 的設(shè)計(jì)就體現(xiàn)了插件架構(gòu)思想
• 事件驅(qū)動(dòng)架構(gòu)：electron 進(jìn)程間通信(基于 node 的 EventEmitter )體現(xiàn)了事件驅(qū)動(dòng)思想
• 微服務(wù)架構(gòu)：如 dubbo 服務(wù)、微前端 體現(xiàn)了微服務(wù)架構(gòu)思想

分層架構(gòu)是最常用的軟件架構(gòu)，有點(diǎn)遞歸的感覺(jué)，先分大的層，在大的每一層，還可以分小的層。此外插件架構(gòu)也非常常用，前端層面，一般多使用分層架構(gòu)和插件架構(gòu)。

俗語(yǔ)所說(shuō)：麻雀雖小、五臟俱全。開(kāi)發(fā)官網(wǎng)雖然很容易，但依然可以擁有優(yōu)秀的架構(gòu)思想，下面將介紹我對(duì)官網(wǎng)進(jìn)行的架構(gòu)設(shè)計(jì)。

官網(wǎng)架構(gòu)

官網(wǎng)的軟件架構(gòu)圖如下所示：

采用的是分層架構(gòu)設(shè)計(jì)， 具體介紹如下：

• Monorepo：使用 pnpm + turbo 來(lái)管理所有代碼，是一個(gè)不錯(cuò)的實(shí)踐。目前我還沒(méi)使用 changesets 做多包版本管理，后續(xù)如有必要會(huì)加上。
• API 層：使用 vercel 的 serverless api 來(lái)滿足官網(wǎng)的服務(wù)端需求，使用 vercel 平臺(tái)提供的 serverless 能力，降低了官網(wǎng)的維護(hù)成本（無(wú)需服務(wù)器）
• 組件層：將配置、方法、組件、主題拆成組件，并用 pnpm workspace 進(jìn)行統(tǒng)一管理，具有良好的可復(fù)用性和可擴(kuò)展性
• 業(yè)務(wù)層：目前只有 Monibuca 官網(wǎng)，后續(xù)還會(huì)有其他官網(wǎng)需求，放在一起維護(hù)，方便復(fù)用組件、統(tǒng)一依賴和代碼風(fēng)格
• Devops：整體使用 pnpm + turbo 進(jìn)行構(gòu)建，組件層會(huì)使用相應(yīng)的構(gòu)建工具如 tsup 、 rollup 等。代碼倉(cāng)庫(kù)使用 github 進(jìn)行托管，使用 vercel 綁定 github 來(lái)打通自動(dòng)化構(gòu)建部署

上面的架構(gòu)圖不一定完全滿足分層架構(gòu)，這個(gè)不重要，重要的是符合架構(gòu)的設(shè)計(jì)原則。下面進(jìn)行簡(jiǎn)單闡述：

• 合適原則：u1s1 ， 做到了既合適，又是業(yè)界領(lǐng)先。如 vitepress 開(kāi)發(fā)文檔頁(yè)、 pnpm 管理 Monorepo 、 使用 Vue3 + TS 、 github + vercel 都是合適的
• 簡(jiǎn)單原則：提現(xiàn)在自動(dòng)化構(gòu)建部署、組件拆分復(fù)用等
• 演化原則：體現(xiàn)在服務(wù)端沒(méi)有做額外設(shè)計(jì)，包括服務(wù)器都沒(méi)有購(gòu)買(mǎi)，直接使用 vercel 完成，如果后面有其他需求，需要購(gòu)買(mǎi)服務(wù)器，那時(shí)我們?cè)僮龇?wù)端的設(shè)計(jì)

技術(shù)架構(gòu)總結(jié)

上文提到的常用軟件架構(gòu)不是獨(dú)立存在的，他們可能是交叉并存的，這些軟件架構(gòu)本身就遵循著合適、簡(jiǎn)單、演化等原則。我們要做的就是在軟件的生命周期中，運(yùn)用架構(gòu)設(shè)計(jì)來(lái)讓這個(gè)軟件發(fā)揮更大的價(jià)值，承載更多的使命。

構(gòu)建部署

構(gòu)建

核心就是使用 pnpm + turbo 進(jìn)行構(gòu)建，大致介紹如下：

• 使用 pnpm 安裝依賴和綁定 workspace
• 使用 turbo 進(jìn)行任務(wù)編排，進(jìn)行多核并行構(gòu)建

構(gòu)建過(guò)程如下圖：

可以看到圖中 build 時(shí)間，用時(shí)非常少，構(gòu)建速度極快。

具體使用方法請(qǐng)查閱官方文檔和 github 開(kāi)源案例。

部署

核心就是：使用 vercel 進(jìn)行自動(dòng)化構(gòu)建部署。

關(guān)于 vercel 的使用，大家自行搜索，這里我闡述下部署流程，如下所示：

1. 官網(wǎng)代碼提交到 github 倉(cāng)庫(kù)
2. 使用 github 登錄 vercel ， 綁定項(xiàng)目
3. 進(jìn)行域名設(shè)置，綁定官網(wǎng)域名
4. 在 vercel 上填寫(xiě)構(gòu)建配置，這里我貼一下目前官網(wǎng)在 vercel 上的構(gòu)建配置，如下圖所示：

只需要對(duì) Output Directory 進(jìn)行設(shè)置即可，其他不動(dòng) 5. 保存構(gòu)建配置，然后進(jìn)行構(gòu)建部署、發(fā)布對(duì)外 6. 后續(xù)官網(wǎng)只要提交代碼到 github 上，就會(huì)自動(dòng)觸發(fā)構(gòu)建部署

部署采坑：

官網(wǎng)使用了 pnpm workspace 和 turbo ， 在使用 vercel 進(jìn)行構(gòu)建部署時(shí)，遇到了本地成功，但在 vercel 構(gòu)建就無(wú)法成功的問(wèn)題，具體原因不祥， vercel 官網(wǎng)文檔內(nèi)容非常簡(jiǎn)單， github issue 和 discussion 上也沒(méi)看到有用的信息，最后谷歌搜到了一個(gè) youtube 視頻，是關(guān)于用 vercel 構(gòu)建部署 pnpm workspace + turbo + nextjs 。遂看完視頻，再結(jié)合自身理解，打通了這塊流程。

預(yù)覽與源碼

預(yù)覽：直接訪問(wèn)官網(wǎng) m7s.live/^[2] 和上文設(shè)計(jì)圖基本一致

源碼地址：github.com/godkun/webs…^[3]

源碼目錄如下圖所示：

有需要的可以自行下載查看，此處不再做源碼內(nèi)容相關(guān)介紹。

開(kāi)源實(shí)踐總結(jié)

• 沒(méi)有固定 deadline ，靈活人性 ??
• 沒(méi)有線上事故定責(zé)，現(xiàn)在官網(wǎng)的 ui 還有點(diǎn)問(wèn)題，文檔還沒(méi)有補(bǔ)上，但沒(méi)關(guān)系，想發(fā)就發(fā)，任性 ??
• 開(kāi)發(fā)官網(wǎng)這種需求，技術(shù)自由，只要 hold 住和滿足需求，想玩什么技術(shù)都可以 ??
• 找業(yè)界和開(kāi)源項(xiàng)目類型相似的優(yōu)秀官網(wǎng)進(jìn)行參考，既然都是開(kāi)源，那就站在開(kāi)源的肩膀上，用魔法打敗魔法 ??

附

• 文中架構(gòu)圖繪圖軟件：excalidraw.com/^[4]
• 圖床：picgo + github
• 架構(gòu)原則參考書(shū)籍：《從零開(kāi)始學(xué)架構(gòu)，照著做，你也能成為架構(gòu)師》
• Monibuca 官網(wǎng)：m7s.live/^[5]
• vitepress 官網(wǎng)：vitepress.vuejs.org/^[6]
• vercel : vercel.com/dashboard^[7]
• pnpm + turbo + vercel 教程視頻: www.youtube.com/watch\?v=A-F…^[8]