.Net Core 6 MVC 整合前端 — 1

前言

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

🔖 文章索引

1. 建立專案
2. 建立 Git repository
3. 新增 package.json
4. 延伸模組
5. 新增 compilerconfig.json
6. 新增 bundleconfig.json 
7. 環境設定 ( Dev、Staging、Prod )
8. 取得環境變數

建立專案

專案範本： ASP.NET Core Web 應用程式 ( Model-View-Controller )

位置：習慣將專案存放至 文件 > Visual Studio 2022 > Projects 底下

記得勾選 將解決方案與專案置於相同目錄中

架構：.NET 6.0

建立 Git repository

專案開啟後首先最重要的是建立 Git repository

建立前先檢查 Git 全域設定 ( 使用者名稱、電子郵件 )

Git > 設定 > Git 全域設定

開始建立 Git repository

上方 Git > 建立 Git 存放庫 > 僅限本機 > .gitignore 範本 選擇 預設 ( VisualStudio ) > 授權版本：無 > 勾選 新增 README.md

新增 package.json

在 方案總管 找到專案 右鍵 點選 > 加入 > 新增項目 > C# > ASP.NET Core > Web > 指令碼 > npm 設定檔 > 新增

接著就可以在終端機 npm i [-S|-D] PluginName

延伸模組

上方 延伸模組 > 管理延伸模組

安裝 Web Compiler v1.14.10

在 Rider 需改用 File Watchers

Web Essentials 2015不再支援SCSS/LESS自動編譯-黑暗執行緒

Visual Studio 使用 SASS / SCSS (Visual Studio Compile SASS / SCSS With Web Compiler)

Sass, SCSS, and Less | JetBrains Rider

新增 compilerconfig.json

安裝 Web Compiler 後，在 all.scss 檔案按右鍵，Click「Compile file」選項

專案根目錄會新增 compilerconfig.json

將 wwwroot/scss/all.css 刪除

修改 outputFile 位置後儲存就會重新 Compile 指定的 inputFile

[
  {
    "outputFile": "wwwroot/css/all.css",
    "inputFile": "wwwroot/scss/all.scss"
  }
]

NuGet Packages

Install BuildBundlerMinifier v3.2.449

新增 bundleconfig.json

在 方案總管 找到專案 右鍵 點選 > 加入 > 新增項目 > C# > ASP.NET Core > 一般 > JSON 檔案 > 名稱：bundleconfig.json

記的要用 npm 下載套件

$ npm i -S bootstrap@5.1.0 bootstrap-icons@1.8.1 Vue@3.2.11

[
  {
    "outputFileName": "wwwroot/js/chunk-vendors.js",
    "inputFiles": [
      "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
    ],
    "minify": {
      "enabled": false
    }
  },
  {
    "outputFileName": "wwwroot/js/vue.dev.js",
    "inputFiles": [
      "node_modules/vue/dist/vue.global.js"
    ],
    "minify": {
      "enabled": false
    }
  },
  {
    "outputFileName": "wwwroot/js/vue.prod.js",
    "inputFiles": [
      "node_modules/vue/dist/vue.global.prod.js"
    ],
    "minify": {
      "enabled": false
    }
  },
  {
    "outputFileName": "wwwroot/css/chunk-vendors.css",
    "inputFiles": [
      "wwwroot/css/plugins/bootstrap-icons.css"
    ]
  }
]

環境設定 ( Dev、Staging、Prod )

Properties > launchSettings.json

{
  "iisSettings": {
    ...
  },
  "profiles": {
    "ProjectName-Dev": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7071;http://localhost:5071",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "ProjectName-Staging": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7071;http://localhost:5071",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Staging"
      }
    },
    "ProjectName-Prod": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7071;http://localhost:5071",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Production"
      }
    },
    "IIS Express": {
      ...
    }
  }
}

取得環境變數

@* /Views/Shared/_Layout.cshtml *@

@{
  var CurrentEnvironment = Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT");
}

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