前言

前兩周，我發(fā)表了上一篇文章《如何用 Blazor 實(shí)現(xiàn) Ant Design 組件庫？》，得到了很多朋友的響應(yīng)，也有很多朋友加入我的釘釘群，并收聽了我在第二天的直播。

這次直播是我人生第一次做直播，以至于沒做什么準(zhǔn)備，主要介紹了 AntBlazor 項(xiàng)目的情況，和介紹了 Blazor 框架的一些知識點(diǎn)，其中穿插了我之前用 Blazor 實(shí)現(xiàn)二維碼多端登錄。結(jié)果沒有重點(diǎn)地一講講了4個(gè)小時(shí)。

這次直播我有錄播，地址在：https://www.bilibili.com/video/BV1uE411c7Hc。大家也可以在釘釘群看回放。

兩周過去了，在這個(gè)清明假期，我準(zhǔn)備在假期的最后一天再來直播，但不會講那么久了，免得占用大家太多的時(shí)間。同樣在釘釘群和B站同時(shí)直播，并開啟錄播。

• 時(shí)間：4月6日 下午2:00 - 5:00

• 直播間：https://live.bilibili.com/22040564

• 釘釘群：項(xiàng)目 README 底部二維碼（推薦）

好了，預(yù)告說完了，本篇主要講一講關(guān)于開發(fā) Blazor 的價(jià)值和我從 AntBlazor 項(xiàng)目中獲得的不少益處。

項(xiàng)目地址: https://github.com/ElderJames/ant-design-blazor

Blazor 是否值得關(guān)注

Blazor 是一個(gè)全新的框架，目前 WebAssembly 的版本還在 Preview 階段，將于5月19日Build大會期間發(fā)布正式。

所以在我推廣 AntBlazor 時(shí)就有很多人質(zhì)疑：現(xiàn)在投入精力開發(fā)組件庫是否值得？會不會跟 Webform 一樣只有微軟自己玩最后被放棄？是否需要等成熟了再去了解？

首先，大家要了解 Blazor 是一個(gè)全能的框架：

• 服務(wù)端：使用 WebSocket 實(shí)現(xiàn) dom 的節(jié)點(diǎn)渲染

• 瀏覽器端：利用 WebAssembly 托管.NET Runtime，運(yùn)行完整的 SPA 應(yīng)用

• PWA：支持離線運(yùn)行

• 移動端：基于Xamarin，實(shí)現(xiàn)原生控件的綁定

• 原生應(yīng)用：.NET 5 正式發(fā)布時(shí)會有 Blazor 原生應(yīng)用的預(yù)覽版本

  
  

相對于三大框架的初期版本，Blazor 基于 .NET 生態(tài)，已經(jīng)有很多完備的組件。如路由、依賴注入、狀態(tài)管理、國際化/本地化、權(quán)限控制、GC、調(diào)試工具、模板等……這些組件在已有前端框架中，哪些是一發(fā)布就全都有的？

當(dāng)然，要是跟現(xiàn)在的前端框架比起來，Blazor 在生態(tài)上還是有很大的發(fā)展空間，但是我們依然能看到它的巨大潛力。作為一個(gè)受歡迎的開源項(xiàng)目，自然會吸引到開源社區(qū)的開發(fā)者一起來豐富生態(tài)。而且相對于后端，前端的生態(tài)發(fā)展應(yīng)該是更容易的。

在這種情況下，我們除了等待官方開發(fā)組開發(fā)新特性之外，圍繞已有的核心組件，還是可以做很多生態(tài)上的補(bǔ)充的。

AntBlazor 就是致力于豐富 Blazor 生態(tài)的眾多開源項(xiàng)目之一。

開發(fā) Blazor 項(xiàng)目的價(jià)值

AntBlazor 是一個(gè)讓大家在開源實(shí)踐的同時(shí)學(xué)習(xí) Blazor 以及其他技能的項(xiàng)目，它在 Blazor WebAssembly 3.1 preview 階段被創(chuàng)建，有一段時(shí)間是實(shí)驗(yàn)性地開發(fā)組件和基于 WebAssembly 的文檔項(xiàng)目。而在 3.2 preview 1 之后開始伴隨著每個(gè) preview 版本，都會在項(xiàng)目中盡量把最新特性都用上。

• 從最開始的普通類庫項(xiàng)目轉(zhuǎn)換成 Razor Class Library，因發(fā)布文件的目錄結(jié)構(gòu)變更修改 Github Actions 的 CI 腳本

• 加入 PWA 特性支持，我們的文檔頁面可以安裝成 PWA。

• 調(diào)整 Debugging 支持，現(xiàn)在文檔的 WebAssembly 項(xiàng)目也支持?jǐn)帱c(diǎn)調(diào)試了。

除了官方發(fā)布的新特性，我自己也在創(chuàng)造性地讓項(xiàng)目更具“前端氣息”，利用 Blazor 做更多有用的實(shí)踐。

改造路由

路由組件是最基礎(chǔ)的組件，官方的路由實(shí)現(xiàn)了最基本的事情——路由表和導(dǎo)航，而為了讓它更易于使用，我一直在改進(jìn)它。

• 既支持原來用特性指定的路由，也支持用目錄的路徑作為路由的約定方式

• 支持 Url QueryString 的屬性綁定

• 支持默認(rèn)終結(jié)點(diǎn)

• 支持切換語言，實(shí)現(xiàn)本地化

路由的改造是在分析過源碼后才實(shí)現(xiàn)的，這部分將來會統(tǒng)一以源碼分析專題介紹給大家。

添加多語言

目前版本還沒官方的全球化/本地化支持，我自己就先實(shí)現(xiàn)了一個(gè)多語言服務(wù)，動態(tài)地切換當(dāng)前使用語言。

這個(gè)多語言服務(wù)值得注意的地方：

• 無需強(qiáng)制刷新頁面，只需導(dǎo)航一下路由就能切換

• 用一個(gè)事件來觸發(fā)需要刷新狀態(tài)的位置，使組件重新渲染不同語言的字符串

• 使用 yaml 來配置資源文件

在這個(gè)期間，更深入地學(xué)習(xí)到了狀態(tài)刷新的要點(diǎn)。在下次直播中會分享給大家。

文檔構(gòu)建的改進(jìn)

本項(xiàng)目用 Blazor WebAssembly 來構(gòu)建靜態(tài)文檔站點(diǎn)，為了讓源碼目錄兼顧 .NET 項(xiàng)目與開放性，源文件會放置在項(xiàng)目目錄外，在構(gòu)建時(shí)會用到 MSBuild Tasks 來做一些文件拷貝和調(diào)用 Node.js 的步驟。Node.js 主要用來調(diào)用 gulp 來構(gòu)建 less 文件和 typescript 文件。但是開發(fā)這個(gè)項(xiàng)目需要安裝 Node.js 還是會讓人難受的。所以我一直在尋找可用 C# 替代的方案。

我最近就在用 .NET Core 寫一個(gè) CLI，用來從分散在各個(gè)組件目錄中的文件生成文檔所需的元數(shù)據(jù)，比如菜單和組件示例頁面的文檔與源碼。這部分在 Ant Design 三大框架的版本中，都是用 Node.js 運(yùn)行 js 腳本實(shí)現(xiàn)的。而我還是想用 .NET 來實(shí)現(xiàn)構(gòu)建過程。目前已經(jīng)取得不錯(cuò)的進(jìn)展，已經(jīng)在 PR #64 進(jìn)行中了。后期我會再繼續(xù)尋找用 .NET 構(gòu)建 less 和 typescript 的方法，集成進(jìn)這個(gè) CLI 項(xiàng)目中，這樣我們在開發(fā)時(shí)也不需要用到 Node 了。

CI 的不斷改進(jìn)

為了做更開放的開源項(xiàng)目，吸引更多開發(fā)者加入到項(xiàng)目中，讓大家容易入手，并把關(guān)注點(diǎn)集中在組件開發(fā)上，我在優(yōu)化開發(fā)流程上做了很多努力，特別是在 CI 上花了好多功夫。在維護(hù) AntBlazor 的這段時(shí)間，也讓我獲得了很多 Github Actions 的使用經(jīng)驗(yàn)和一些 shell 腳本的應(yīng)用技巧：

• ant-design 倉庫的樣式同步：

  ant-design 的樣式一直在改進(jìn)，所以對于我們這個(gè)從最開始就定位為一個(gè) Ant Design 可持續(xù)發(fā)展的 Blazor 實(shí)現(xiàn)，樣式同步并不斷改進(jìn)功能是很有必要的。

  我于是寫了一個(gè)定時(shí)觸發(fā)的 shell 腳本，克隆 ant-design 倉庫，并把 components 目錄下的所有 less 文件復(fù)制到 ant-design-blazor 項(xiàng)目，最后把變更以 PR 方式提交到倉庫中。

• PR 預(yù)覽頁面 :

  我看到 Ant Design 官方的文章中介紹了他們的CI，我也覺得里面的 PR 預(yù)覽很有意思，于是我也做了一個(gè)類似的功能。不同點(diǎn)是，他們用了Azure Pipelines，而我依然只用 Github Actions。

  在 Github Actions 中，Fork 的倉庫沒有對原倉庫進(jìn)行寫操作的權(quán)限，導(dǎo)致 PR 腳本中機(jī)器人的 token 不能創(chuàng)建issue 評論來顯示瀏覽頁面的鏈接。于是我就用手動觸發(fā)的方式，先發(fā)一個(gè) /preview 的評論，觸發(fā)腳本運(yùn)行預(yù)覽頁面的部署和鏈接顯示。

????????后期考慮寫一個(gè) Github Bot，這樣就能給他授權(quán)寫操作權(quán)限了。

• Gitee 同步與 Gitee Pages 刷新

  如上篇文章提到，由于網(wǎng)絡(luò)原因，國內(nèi)用戶訪問 Github 和 Github Pages 都會有不同程度的困難。于是我在Gitee 創(chuàng)建了一個(gè)鏡像倉庫，并且也開通了 Gitee Pages 的服務(wù)。

  一開始每次推送代碼到 Github 之后，我都要去 Gitee 點(diǎn)一下強(qiáng)制同步，再點(diǎn)一下更新 Gitee Pages，好辛苦。Gitee Pages 的刷新還需要 99 元的 Pro 版本才支持，對于個(gè)人開源項(xiàng)目來說，是極為不友好的。于是我各處搜索，終于找到了 Gitee 同步和 Gitee Pages 刷新的 Github Action。雖然 Gitee Pages 刷新是需要獲取 Cookie 的（連 SSH 都不能操作），但是總比手動進(jìn)去點(diǎn)刷新強(qiáng)很多。具體的腳本大家可以到項(xiàng)目中參考，我認(rèn)為這個(gè)對于使用 Github Pages 做博客或者的項(xiàng)目文檔的開發(fā)者來說，是非常值得運(yùn)用的。

總結(jié)：學(xué)習(xí)-反哺是一個(gè)良性循環(huán)

可以看出，Blazor 讓開源的 .NET 點(diǎn)亮了前端技能，從此用 .NET 就能做更多前端的事情了。

以上的這些實(shí)踐，都讓我們學(xué)習(xí)到了更多，有的甚至是不只作用于 Blazor 的更通用的技能；而每一項(xiàng)有意義的改進(jìn)，又都可以成為豐富 Blazor 生態(tài)的重要元素。

其實(shí)不是只在 AntBlazor 項(xiàng)目中，在其他需要我們學(xué)習(xí)的技能上，創(chuàng)造性的實(shí)踐通常都會讓我們得到更多的進(jìn)步。

歡迎關(guān)注 Blazor，歡迎參與 AntBlazor 和加入 Blazor 中文社區(qū)。

Github: https://github.com/ElderJames/ant-design-blazor 文檔/Demo: https://ant-design-blazor.gitee.io Blazor文檔：https://docs.microsoft.com/zh-cn/aspnet/core/blazor

---

本項(xiàng)目以 MIT 協(xié)議開源，為了能得到夠更好的且可持續(xù)的發(fā)展，我們期望獲得更多的支持者，我們將把所得款項(xiàng)用于社區(qū)活動和推廣。你可以通過文章的 【贊賞】 和 README 中的捐贈方式支持我們。我們會把詳細(xì)的捐贈記錄登記在捐贈者名單中。

總結(jié)

以上是生活随笔為你收集整理的如何用 Blazor 实现 Ant Design 组件库（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。