nodejs 開發環境建置

83 / 100

內容目錄

在以 nodejs 為基礎的前端程式開發裡，包含有 vue , React, Angular …等。首先先下載必要的軟體，

下載

nvm 下載版本: Linux 、 windows
nodejs : 官方網站下載 Long Term Support (LTS) schedule. 的版本
IDE: Visual Studio Code

nvm 主要是在管理 nodejs 的版本，若在開發上有需要不同版本的 nodejs ，那麼 nvm 這是個好的選擇。

安裝

Windows 安裝 nvm & nodejs

可以輸入 nvm --version 來確認是否有正確安裝及其版本。

PS V:\nodejs> nvm --version

Running version 1.1.7.

利用 nvm 來安裝 nodejs 非常方便。

PS V:\nodejs> nvm list available

|   CURRENT    |     LTS      |  OLD STABLE  | OLD UNSTABLE |
|--------------|--------------|--------------|--------------|
|    15.5.1    |   14.15.4    |   0.12.18    |   0.11.16    |
|    15.5.0    |   14.15.3    |   0.12.17    |   0.11.15    |
|    15.4.0    |   14.15.2    |   0.12.16    |   0.11.14    |
|    15.3.0    |   14.15.1    |   0.12.15    |   0.11.13    |
|    15.2.1    |   14.15.0    |   0.12.14    |   0.11.12    |


PS V:\nodejs> nvm install 14.15.4
Downloading node.js version 14.15.4 (64-bit)...
Complete
Creating C:\Users\polin.wei\AppData\Roaming\nvm\temp

Downloading npm version 6.14.10... Complete
Installing npm v6.14.10...

Installation complete. If you want to use this version, type

nvm use 14.15.4

VS Code User 和 System 的差別

VS Code User 和 System 最主要的區別在於您是否有 Administrator 的權限，若沒有那就只能用 User 版來作安裝了。

VS Code 常用 plugins

Vetur

Vetur 支援.vue檔案的語法高亮顯示，除了支援template模板以外，還支援大多數主流的前端開發指令碼和外掛

Github倉庫：Vetur
官方文件：Vetur文件

GitLens — Git supercharged

GitLens可以幫助您更好地理解代碼。快速查看更改行或代碼塊的對象，原因和時間。回顧歷史，以進一步了解代碼的演變方式和原因。毫不費力地探索代碼庫的歷史和演進。

Flow Language Support

Flow可以在程式碼運行前對類型錯誤進行檢查，包括：

類型錯誤
對null 的引用
以及可怕的 “undefined is not a function” flow允許我們給變量添加類型，如:boolean、number、string、null、void

ESLint

ESLint 要依附在Node.js下執行，會幫你做程式編譯前的語法分析，在執行之前抓出可能的錯誤，大部分的 ESLint 會有以下幾個功能：

幫你找出語法錯誤: 沒宣告變數就拿來用、少了括號等等常見的語法錯誤
確保你遵循最佳實踐: 不使用全域變數、建議使用 === 而非 ==、不使用 eval …
提醒你刪掉多餘的程式碼:有些變數宣告了卻沒有使用、import 了沒有使用的模組、空的 class constructor …
統一基本的 coding style: 要不要加分號、使用單引號或雙引號、縮排使用 space 或 tab 等等

VS Code 常用設定

Default VS Code As The Git Editor

# 設定 git 在 VS Code 全域的預設編輯器
git config --global core.editor "code --wait"

# 上述指令的另一指令如下
git config --global core.editor "code -w"

# Note: The --wait or -w flag is crucial without this git won't know the editing has completed and in turn won't finish executing the git command.

vue Debugger

vue 提供了好用的 Debugger 偵錯外掛如下

並依官方文件: debugging-in-vscode 指引建立 launch.json 即可, 內容如下

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    },
    {
      "type": "firefox",
      "request": "launch",
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}

管理

nodejs 不同版本的管理

安裝完 nodejs 會在個人目錄下建置不同的版本。

你可以用 nvm 的指令來作切換管理

#查看 nvm 的版本
PS V:\vue2-apps> nvm version
1.1.7

#查看 node js 在本地有裝那些版本
PS V:\vue2-apps> nvm list

  * 12.18.2 (Currently using 64-bit executable)
    12.16.2
    10.15.3
    10.14.2

#切換使用 nodejs 的版本
PS V:\vue2-apps> nvm use 12.16.2
Now using node v12.16.2 (64-bit)

用 nvm 來管理 nodejs 的好處, 就是可以因應不同的需求來作切換版本，而在 windows 的平台上，也只是建立一個連結來作對應。

power shell 無法執行的問題

若在執行 nodejs 時發生 power shell 無法執行的問題時，請參考 PowerShell 的 .ps1 如何執行

測試

可以建立一個目錄 webpack-demo ，並用指令 npm init -y ，來初始專案。

最簡單的程式如下圖，然後再打入指令 webpack 就可以包裝整個專案。前端開發環境設定原則上就是這麼簡單。若要快速建置一個網站，不妨參考：在 Node JS 使用 vue-cli 3 快速開發網頁與佈署到 github-pages

IT Skills 波林

近期文章

Most Used Categories

nodejs 開發環境建置