React.v17 + TypeScript 導入紀錄(稿)

Prerequisites 前置準備

• Node.js Version 12.18.2+

• Npm Version 6.14+ (npm is installed with Node.js)

  You can check to see if and what versions of node.js and npm you have installed by entering node -v and npm -v, respectively, in the terminal.

• check the .NET Framework version

  • reg query "HKLM\SOFTWARE\Microsoft\Net Framework Setup\NDP\v4" /s

  • ref→How to quickly check the .NET Framework version on Windows 10

• check the .NET Core version

  • dotnet --version

  • dotnet --info

  • dotnet --list-runtimes

  • dotnet --list-sdks

• Visual Studio 2019

安裝順序

• ASP.NET Core 3.1 Web 應用程式

  • 部版到IIS執行

    • 安裝.NET Core Windows Server Hosting

• React.v17 with TypeScript

  • router

  • scss

• axios

• Redux

• customized store

  • formData

  • meta

  • appInfo

• customized Hooks

  • useHttp

    • useInit

    • useLoad

    • postData

• Material-UI

• CSS Modules

• styled-components

• toast

一些成果紀錄

安全性相關 - JavaScript Release code 混淆效果

Release/build 模式下的程式碼會做混淆，當然也有分割成無數個chunk。如圖：

就算 [Pretty-print] 也難以閱讀。如圖：

一些心得與注意事項

React.v16 與 v17 的開發組態有些微不同。

ASP.NET Core 3.1 不再需要web.config。注意：也不要自己加入 web.config 否則會很麻煩。 然而在佈版到 IIS 網站時會自動產生 web.config ，就把它放在 IIS 網站就好。應該是 IIS 網站一定要有 web.config 才能執行的關係，但記得原始碼的部份ASP.NET Core 3.1 已不再需要 web.config ，它已由 appsettings.json 取代了。

關閉 Visual Stuido 2019 附屬的TypeScript編譯功能

因此案例專案有兩套 TypeScript 運作，一個是 Visual Studio 本身提供、一個是 npm 提供。我們使用 npm TypeScript，故關閉 VS TypeScript 以避衝突混亂。

釋放 node.exe 資源

在此案例中，Visual Studo 2019 的資源釋放並不徹底，使得 node.exe 一直留在記憶體中，故需下指令強制關閉node.exe以釋放資源，如下：

C:\> taskkill /IM node.exe /F
強制關閉 node.exe 以釋放資源

node.exe 未被釋放問題

參考文件

Visual Studio 2019 - ASP.NET Core 3.1 React App with TypeScriptDEV Community

Usage With TypeScript | Redux

react-router-dom+typescript配置 - 掘金

Adding a Sass Stylesheet | Create React App

重新認識 CSS - @importTitangene Blog

Sass: Variables

IIS - 運行 ASP.NET Core 網站John Wu's Blog