.Net Core 6 MVC 整合前端 — 3

Published in

Conrad KU

3 min readMar 15, 2023

前言

因為公司內部許多程式都只能用 IE 開啟，但隨著作業系統更新至 Win 10 or Win 11 已經開始不支援 IE 所以要開始著手翻舊系統，而新系統架構選擇用 .Net Core 6 MVC ，藉由這次過程學習 Visual Studio & Resharper & C# & Razor 📖

上一篇：.Net Core 6 MVC 整合前端 — 2

🔖 文章索引

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`

Compile and build TypeScript code using NuGet - Visual Studio (Windows)

Learn how to add TypeScript support to your Visual Studio projects by using the NuGet package.

learn.microsoft.com

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

參考：Enabling 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.

JavaScript modules - JavaScript | MDN

This guide gives you all you need to get started with JavaScript module syntax.

developer.mozilla.org

// 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

Cannot find name 'console'. What could be the reason for this?

The following snippet shows a typescript error at LINE 4: import {Message} from './class/message'; function…

stackoverflow.com

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.

Error: Typescript Feature 1.5. Current language level is 1.4

I am working in the context of Visual Studio 2015 (with Resharper), and am referencing a TypeScript definitions file…