[TypeScript] 解決 Webpack v4 升級到 v5 遇到 tsc 編譯時出現 Cannot find name 'Map'

### 問題 繼上編解決在 webpack v4 的安全性相依成功升級後。接下的任務是進一步將 webpack 的版本由 v4 升到 v5。 升級前環境： ```json "devDependencies": { "@types/node": "^16.0.0", "ts-loader": "^8.4.0", "typescript": "^5.0.2", "webpack": "^4.46.0", "webpack-cli": "^4.10.0" } ``` 把 webpack 及 webpack-cli 升級到 5.x，並同步升級 ts-loader 至 9.x 版本 執行 tsc 時出現 Cannot find name 'Map' 的問題

### 解決方法 除了更新 webpack, webpack-cli, ts-loader 的版本外 也要一併更新 `@type/node` 的版本 ``` npm install -D @types/node ``` 修改 `tsconfig.json` 加上 typeRoots 的位置 ``` "typeRoots": [ "node_modules/@types" ], ``` 升級後環境： ```json "devDependencies": { "@types/node": "^16.18.16", "ts-loader": "^9.4.2", "typescript": "^5.0.2", "webpack": "^5.76.2", "webpack-cli": "^5.0.1" }, ``` ### 後記 其實在這專案的底下還有一組是用 Typescript 2.x 的版本做編譯，但暫時未能同步升級，卻用不同的 Typescript 的版本，不特別指定會是以主目錄下的 `node_modules/@type` 為目標。所以兩個都直接指定各自的 typeRoots 就可以順利通過編譯。總算也把開發的相依套件版本全都升級完成。 ### 參考連結 - [Typescript compiler: Cannot find name 'Map'](https://stackoverflow.com/questions/52468096/typescript-compiler-cannot-find-name-map)

[npm] 解決 npm glob-parent 版本過舊的安全性問題

markdown ### 問題 最近在一個舊的專案採用 webpack 4.x 的版本，最近要修改檔案，要在能正常執行下，想要一併更新一下開發套件版本。 原本環境: - typescript 3.9.5 - ts-loader 7.0.5 - webpack 4.43.0 - webpack-cli 4.9.1 執行 `npm audit fix` 之後，已修正不少套件相依版本，但仍有安全性相依版本的問題，即便依照指令再做一次 fix 的動作仍無法更新修正。

glob-parent  <5.1.2
Severity: high
glob-parent before 5.1.2 vulnerable to Regular Expression Denial of Service in enclosure regex - https://github.com/advisories/GHSA-ww39-953v-wcq6
fix available via `npm audit fix`
node_modules/watchpack-chokidar2/node_modules/glob-parent
  chokidar  1.0.0-rc1 - 2.1.8
  Depends on vulnerable versions of glob-parent
  node_modules/watchpack-chokidar2/node_modules/chokidar
    watchpack-chokidar2  *
    Depends on vulnerable versions of chokidar
    node_modules/watchpack-chokidar2
      watchpack  1.7.2 - 1.7.5
      Depends on vulnerable versions of watchpack-chokidar2
      node_modules/watchpack
        webpack  4.44.0 - 4.46.0
        Depends on vulnerable versions of watchpack
        node_modules/webpack

由於 GitHub 的機器人找出這個安全性問題，而且風險值很高，雖然不更新時，可正確產出結果，但是總是有個風險在。 當然直接升級 webpack v5.x 後，此安全問題可以解決，但是在跑專案時會出錯，以暫時不升版的狀況下，該如何更新版本而不出錯才是當前要解決的問題。

程式開發者不能不知道的 GitHub Copilot

markdown ### 前言 GitHub 在 2021 六月時推出 AI 程式碼工具 Copilot。它可以幫助開發者在寫程式時提供自動完成程式建議。基於 OpenAI Codex 可即時在編輯器作用。相較於現在超及熱門的 ChatGPT，[GitHub Copilot](https://github.com/features/copilot) 是更適合開發人員使用的工具。然而 Microsoft 就在昨日還隆重介紹了 [Microsoft 365 Copilot](https://blogs.microsoft.com/blog/2023/03/16/introducing-microsoft-365-copilot-your-copilot-for-work/?WT.mc_id=DT-MVP-5002629)，要把它融入日常工作流程中，現在完全不能忽視 Copilot 了呀～ 首先還是先來把工具搭配 Copilot 搞定吧！