.Net Core 6 MVC 整合前端 — 4

本系列文章列表

• .Net Core 6 MVC 整合前端 — 1
• .Net Core 6 MVC 整合前端 — 2
• .Net Core 6 MVC 整合前端 — 3

前三篇都是使用 Visual Studio 2022 v17.x.x

在 2023/3/25 延伸模組 — Bundler & Minifier 2022+ 版本自動更新後功能就失效了，花了快兩天時間排查最後解法是將 Visual Studio 2022 升級至 v17.5.3 👼

但之後是將延伸模組 — Bundler & Minifier 2022+ 改換成 NuGet — BuildBundlerMinifier v3.2.449，使用 NuGet 可以自行選擇要安裝套件的版本 ( 延伸模組不行選版本 )

因為 Visual Studio + ReSharper 剛開啟時都需要等一下子沒有這麼順暢，所以想改使用 JetBrains — Rider。

Rider 功能就有包含 WebStorm & DataGrip，像是 Vue Component 的 template，Visual Studio 就不支援 emmet 但 Rider 就有支援 👏

改用 Rider 接下來會遇到的問題 🔽

🔖 文章索引

1. Compile SCSS
2. Compile TypeScript
3. Bundler & Minifier
4. 總結

Compile SCSS

在 Rider 沒有像 Visual Studio 延伸模組 Web Compiler 2022+ 來 compile SCSS，根據官方推薦是使用 File Watchers 但最後我用 npm 解決，這樣在版本控制時每個人只需要照著 README.md 操作即可 👍

$ npm i -D npm-run-all@4.1.5 sass@1.60.0 csso-cli@4.0.2

// package.json

{
  ...
  "scripts": {
    "watch:scss": "sass -w wwwroot/scss:wwwroot/css",
    "watch:mini-css": "csso --watch wwwroot/css/all.css --output wwwroot/css/all.min.css --source-map inline",
    "watch": "run-p watch:scss watch:mini-css"
  }
  ...
}

$ npm run watch

在 sass --watch 如果跳出 Deprecation warning $weight: Passing a number without unit % (100) is deprecated.

這是 bootstrap v5.2.3 以前版本的問題所以將 bootstrap 版本更新至 5.2.3 就可以囉

Deprecation warning $weight: Passing a number without unit % (100) is deprecated. · Issue #37430 ·…

Release fix for "Deprecation warning $weight: Passing a number without unit % (100) is deprecated"…

Compile TypeScript

NuGet install Microsoft.TypeScript.MSBuild v4.9.5

官方推薦 Compiling TypeScript into JavaScript

Before you start

1. Press Ctrl+Alt+S to open the IDE settings and select Languages & Frameworks | TypeScript.
2. Make sure the TypeScript Language Service checkbox is selected.

To compile files from a custom scope

Click the TypeScript widget on the Status bar, select Compile, and then select the path to tsconfig.json.

Bundler & Minifier

NuGet install BuildBundlerMinifier v3.2.449

會根據 root/bundleconfig.json 去做打包

只是差別在 Rider 需 Run 才會打包檔案出來，Visual Studio 不需 Run 只要 bundleconfig.json 變動或刪除 output file 就會打包檔案出來。

總結

上述問題都解決後就是開發過程中多了一些步驟

1. Run Project
2. Terminal npm run watch
3. Click the TypeScript widget on the Status bar, select Compile, and then select the path to tsconfig.json.
4. 每一次改動瀏覽器需自行重新整理

Note:

npm run watch 發生錯誤時請檢查 wwwroot/css/all.css 需先存在

先執行 npm run watch:scss 讓 all.css 產生出來

在執行 npm run watch 進行開發