The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

使用 Playwright for .NET 開發 E2E 端對端測試程式

最近迷上了 Playwright 這套 E2E 框架,他不但同時支援 Chromium, Firefox 與 WebKit 瀏覽器,還可以跨平台支援 Windows, macOS 與 Linux,而且針對 SPA 類型的應用程式進行 E2E 測試完全不用撰寫太多非常 Hacky 的程式碼,寫起來非常的順手。除此之外,他還同時支援 JavaScript & TypeScript, Python, .NETJava 等程式語言,相當容易上手。

... 繼續閱讀 ...

如何讓 Azure Functions 也可以支援 dotnet watch 自動監視程式變更重啟

在用 .NET Core 3.1 開發 Azure Functions 的時候一直以來有個困擾,那就是每次改完程式都要回到 Terminal 中斷程式執行,並且重新啟動,沒有像其他應用程式那樣可以用 dotnet watch run 自動監視檔案變更就自動重啟應用程式。雖然這個功能沒有內建在 func start 命令中,但是我卻發現 .NET CLI 竟然有個 dotnet watch msbuild 可以用,雖然陽春了點,但其實也是還是可以滿足需求! 👍

... 繼續閱讀 ...

錯誤的 HintPath 也可以在 Visual Studio 中建置,但 CI 的時候可能不行

我在幫一個客戶 Code Review 並重構專案的時候,發現他們的專案在 Visual Studio 2019 都可以順利的建置專案,但是透過 Azure Pipelines 使用 MSBuild 建置卻會編譯失敗,錯誤訊息非常不清楚,真的是查了很久才想通問題的主因在哪裡,我覺得值得寫篇文章記錄一下。

... 繼續閱讀 ...

使用 Azure CLI 快速建立 Azure Web App 測試網站、資料庫與儲存體帳戶

架設一個測試網站,最常見的需求就是一個網站(Azure Web App)外加一個資料庫(Azure SQL Database),如果有檔案儲存需求,頂多就再加一個儲存體帳戶(Azure Storage Account)就可以搞定。這篇文章我將分享如何透過 Azure CLI 快速建立網站、資料庫與儲存體帳戶,你完全可以不透過 Azure Portal 建立這些服務,使用 無互動 (non-Interactive) 的方式就可以建立所有必要的 Azure 資源。

... 繼續閱讀 ...

設定 Angular 專案使用 ESLint 進行更嚴格的程式碼撰寫風格檢查

早期 Angular CLI 建立的專案都有內建 TSLintcodelyzer,但從 Angular CLI v11 開始建議大家開始轉移到 Angular ESLint,直到 Angular CLI v12 直接拔除所有 Linter 設定。本篇文章我將介紹如何從現有 TSLint 的 Angular 專案升級到改用 Angular ESLint 進行撰寫風格檢查,以及從完全沒有 ESLint 的 Angular 專案如何加入 ESLint 的完整流程。

... 繼續閱讀 ...

使用 MSBuild 建置方案檔(sln)與建置專案檔(csproj)的陷阱與注意事項

我一年大概都會幫幾家企業導入 Azure DevOps Server 平台,最近幫客戶導入的過程遇到了一個難題。一個方案檔中有 9 個專案,其中有 4 個 .NET Framework 4.7.2 類別庫專案、1 個 .NET Framework 4.7.2 的 ASP.NET Web Forms 專案、2 個 .NET Core 2.1 類別庫專案、1 個 .NET Standard 2.0 專案、2 個 .NET Core 2.1 類別庫專案、1 個 .NET Core 2.1 的 ASP.NET Core 專案。很少看到一個案子用這麼混搭的技術,而這個案子要做 CI/CD 確實也遇到了問題。這篇文章我將說明問題與解決方法!

... 繼續閱讀 ...

設定 Angular 專案使用 husky 簡化 Git hooks 設定並用 Prettier 統一風格

我們在團隊中開發 Angular 應用程式,經常需要同步每個成員的程式碼格式,與其訂定 Coding Style (代碼風格),倒不如直接用工具強制所有成員用一致的風格進行程式碼排版。本篇文章我將示範用 husky 搭配 prettier 來設定 Git 的 pre-commit hook,讓每個人在 git commit 之前就自動將變更的程式碼進行排版。

... 繼續閱讀 ...