前言

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

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

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

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

• 時間：4月6日 下午2:00 - 5:00

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

• 釘釘群：項目 README 底部二維碼（推薦）

好了，預告說完了，本篇主要講一講關于開發 Blazor 的價值和我從 AntBlazor 項目中獲得的不少益處。

項目地址: https://github.com/ElderJames/ant-design-blazor

Blazor 是否值得關注

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

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

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

• 服務端：使用 WebSocket 實現 dom 的節點渲染

• 瀏覽器端：利用 WebAssembly 托管.NET Runtime，運行完整的 SPA 應用

• PWA：支持離線運行

• 移動端：基于Xamarin，實現原生控件的綁定

• 原生應用：.NET 5 正式發布時會有 Blazor 原生應用的預覽版本

  
  

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

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

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

AntBlazor 就是致力于豐富 Blazor 生態的眾多開源項目之一。

開發 Blazor 項目的價值

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

• 從最開始的普通類庫項目轉換成 Razor Class Library，因發布文件的目錄結構變更修改 Github Actions 的 CI 腳本

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

• 調整 Debugging 支持，現在文檔的 WebAssembly 項目也支持斷點調試了。

除了官方發布的新特性，我自己也在創造性地讓項目更具“前端氣息”，利用 Blazor 做更多有用的實踐。

改造路由

路由組件是最基礎的組件，官方的路由實現了最基本的事情——路由表和導航，而為了讓它更易于使用，我一直在改進它。

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

• 支持 Url QueryString 的屬性綁定

• 支持默認終結點

• 支持切換語言，實現本地化

路由的改造是在分析過源碼后才實現的，這部分將來會統一以源碼分析專題介紹給大家。

添加多語言

目前版本還沒官方的全球化/本地化支持，我自己就先實現了一個多語言服務，動態地切換當前使用語言。

這個多語言服務值得注意的地方：

• 無需強制刷新頁面，只需導航一下路由就能切換

• 用一個事件來觸發需要刷新狀態的位置，使組件重新渲染不同語言的字符串

• 使用 yaml 來配置資源文件

在這個期間，更深入地學習到了狀態刷新的要點。在下次直播中會分享給大家。

文檔構建的改進

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

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

CI 的不斷改進

為了做更開放的開源項目，吸引更多開發者加入到項目中，讓大家容易入手，并把關注點集中在組件開發上，我在優化開發流程上做了很多努力，特別是在 CI 上花了好多功夫。在維護 AntBlazor 的這段時間，也讓我獲得了很多 Github Actions 的使用經驗和一些 shell 腳本的應用技巧：

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

  ant-design 的樣式一直在改進，所以對于我們這個從最開始就定位為一個 Ant Design 可持續發展的 Blazor 實現，樣式同步并不斷改進功能是很有必要的。

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

• PR 預覽頁面 :

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

  在 Github Actions 中，Fork 的倉庫沒有對原倉庫進行寫操作的權限，導致 PR 腳本中機器人的 token 不能創建issue 評論來顯示瀏覽頁面的鏈接。于是我就用手動觸發的方式，先發一個 /preview 的評論，觸發腳本運行預覽頁面的部署和鏈接顯示。

????????后期考慮寫一個 Github Bot，這樣就能給他授權寫操作權限了。

• Gitee 同步與 Gitee Pages 刷新

  如上篇文章提到，由于網絡原因，國內用戶訪問 Github 和 Github Pages 都會有不同程度的困難。于是我在Gitee 創建了一個鏡像倉庫，并且也開通了 Gitee Pages 的服務。

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

總結：學習-反哺是一個良性循環

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

以上的這些實踐，都讓我們學習到了更多，有的甚至是不只作用于 Blazor 的更通用的技能；而每一項有意義的改進，又都可以成為豐富 Blazor 生態的重要元素。

其實不是只在 AntBlazor 項目中，在其他需要我們學習的技能上，創造性的實踐通常都會讓我們得到更多的進步。

歡迎關注 Blazor，歡迎參與 AntBlazor 和加入 Blazor 中文社區。

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

---

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。