內容目錄
nodejs 開發環境建置
在以 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.
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模板以外,還支援大多數主流的前端開發指令碼和外掛
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
你必須 登入 才能發表評論。