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

問題

繼上編解決在 webpack v4 的安全性相依成功升級後。接下的任務是進一步將 webpack 的版本由 v4 升到 v5。

升級前環境：

"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"
  ],

升級後環境：

"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'

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

問題

最近在一個舊的專案採用 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

前言

GitHub 在 2021 六月時推出 AI 程式碼工具 Copilot。它可以幫助開發者在寫程式時提供自動完成程式建議。基於 OpenAI Codex 可即時在編輯器作用。相較於現在超及熱門的 ChatGPT，GitHub Copilot 是更適合開發人員使用的工具。然而 Microsoft 就在昨日還隆重介紹了 Microsoft 365 Copilot，要把它融入日常工作流程中，現在完全不能忽視 Copilot 了呀～

首先還是先來把工具搭配 Copilot 搞定吧！