本系列文章列表
前三篇都是使用 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
就可以囉
Compile TypeScript
NuGet install Microsoft.TypeScript.MSBuild v4.9.5
官方推薦 Compiling TypeScript into JavaScript
Before you start
- Press Ctrl+Alt+S to open the IDE settings and select Languages & Frameworks | TypeScript.
- 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 就會打包檔案出來。
總結
上述問題都解決後就是開發過程中多了一些步驟
- Run Project
- Terminal
npm run watch
- Click the TypeScript widget on the Status bar, select Compile, and then select the path to tsconfig.json.
- 每一次改動瀏覽器需自行重新整理
Note:
npm run watch
發生錯誤時請檢查 wwwroot/css/all.css
需先存在
先執行 npm run watch:scss
讓 all.css
產生出來
在執行 npm run watch
進行開發