前言
因為公司內部許多程式都只能用 IE 開啟,但隨著作業系統更新至 Win 10 or Win 11 已經開始不支援 IE 所以要開始著手翻舊系統,而新系統架構選擇用 .Net Core 6 MVC ,藉由這次過程學習 Visual Studio & Resharper & C# & Razor 📖
🔖 文章索引
1. Add TypeScript support with NuGet
2. Add TypeScript JSON Configuration File
3. Use the Vue ES Module Build
4. Use the Import Maps
5. Applying the module to your HTML
6. 完整程式碼
7. 遇到的問題
8. 總結
Add TypeScript support with NuGet
1. Visual Studio 安裝 Microsoft.TypeScript.MSBuild
2. npm install typescript
$ npm i -D typescript@4.9.5
Note: Microsoft.TypeScript.MSBuild 版本建議與 npm i -D typescript
一致
Add TypeScript JSON Configuration File
參考:tscofing.json configure options、tsconfig.json 有哪些可以設定
⭐️ rootDir
有設定時在 output 到 outDir
path 時會依照目錄結構產生
如果沒有設定 rooutDir
則只會產生 *.js
不會有目錄結構
// tsconfig.json
{
"compileOnSave": true,
"compilerOptions": {
"rootDir": "wwwroot/ts",
"outDir": "wwwroot/dist",
"sourceMap": true,
"strict": true,
"target": "ESNext",
"noImplicitAny": true,
"strictNullChecks": true,
"removeComments": true,
"skipLibCheck": true,
"moduleResolution": "node",
"isolatedModules": true
},
"include": [
"wwwroot/ts/**/*"
],
"exclude": [
"node_modules"
]
}
Use the Vue ES Module Build
$ npm i -S vue@3.2.11
Fix bundleconfig.json
[
{
"outputFileName": "wwwroot/js/vue.dev.js",
"inputFiles": [
"node_modules/vue/dist/vue.esm-browser.js"
]
},
{
"outputFileName": "wwwroot/js/vue.prod.js",
"inputFiles": [
"node_modules/vue/dist/vue.esm-browser.prod.js"
]
},
]
Use the Import Maps
Chrome & Edge Version 89 up
We can teach the browser where to locate the vue
import by using Import Maps
// Views/Shared/_Script.cshtml
<script src="~/js/chunk-vendors.js" asp-append-version="true"></script>
@if (ViewBag.CurrentEnvironment == "Production")
{
<script type="importmap">
{
"imports": {
"vue": "./js/vue.prod.js"
}
}
</script>
}
else
{
<script type="importmap">
{
"imports": {
"vue": "./js/vue.dev.js"
}
}
</script>
}
Applying the module to your HTML
<script type="module" src="..."></script>
The script into which you import the module features basically acts as the top-level module. If you omit it, Firefox for example gives you an error of “SyntaxError: import declarations may only appear at top level of a module”.
You can only use import
and export
statements inside modules, not regular scripts.
// Views/Home/Index.cshtml
@{
ViewBag.Title = "首頁";
}
<div id="app">
<div class="container">
<h1>{{ message }} <i class="bi bi-alarm"></i></h1>
<button type="button" class="btn btn-outline-primary" @@click="count++">{{ count }}</button>
</div>
</div>
@section AdditionalScript
{
<script type="module" src="~/dist/page/home/index.js"></script>
}
完整程式碼
// Views/Shared/_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
@*
5 ways to render a partial view in asp.net core
https://nitishkaushik.com/how-to-render-a-partial-view-in-asp-net-core/
*@
<partial name="_Head" />
@await RenderSectionAsync("AdditionalCSS", required: false)
</head>
<body>
@RenderBody()
<partial name="_Script"/>
@await RenderSectionAsync("AdditionalScript", required: false)
</body>
</html>
// Views/Home/Index.cshtml
@{
ViewBag.Title = "首頁";
}
<div id="app">
<div class="container">
<h1>{{ message }} <i class="bi bi-alarm"></i></h1>
<button type="button" class="btn btn-outline-primary" @@click="count++">{{ count }}</button>
</div>
</div>
@section AdditionalScript
{
<script type="module" src="~/dist/page/home/index.js"></script>
}
// wwwroot/ts/page/home/index.ts
import { createApp, ref, onMounted } from 'vue';
createApp({
setup() {
const message = 'Hello Vue';
const count = ref(0);
onMounted(() => {
console.log(`count: ${count.value}`);
});
return {
message,
count
}
}
}).mount('#app');
遇到的問題
1. visual studio .ts cannot resolve console
$ npm i -D @types/node
2. Error: Typescript Feature 3.0. Current language level is 1.8
It’s a ReSharper setting. From the menu bar in Visual Studio, click Resharper
→ Options
→ Code Editing
→ TypeScript
→ Inspections
, then change the TypeScript language level
to the relevant value.
總結
加上 TypeScript
有了 IntelliSense 和型別在開發和維護上都變更好了 👏