Try   HackMD

Node.js可安裝於Linux、Windows、MacOS環境,但在cmd時使用的指令以Linux為主,若安裝完Node.js後直接開啟windows的cmd下指令,你會發現它根本不認識"node"或"npm"這些單字,因此需要調整作業環境,以便於開發。


WSL

WSL全名叫Windows Subsystem on Linux,是微軟和 Canonical(Ubuntu 的母公司)共同開發,於 Windows 10 後加入的功能,能夠在 Windows 10 掛載一個 Linux 系統,用起來又不像虛擬機那樣肥、開機緩慢,是 Windows 使用者用來入門 Linux、甚至是進階使用Linux系統的好工具。

注意!WSL僅支援Win10之後(包含Win10)的作業系統!!

  1. 打開windows的搜尋,查關鍵字"功能"找到「開啟或關閉Windows功能」,點下去。

    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →

  2. 找到並勾選「Windows子系統Linux版」,按下確定。

    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →

  3. 會詢問是否重新啟動電腦,一定要重啟,不然吃不到設定。

  4. 開啟Microsoft Store搜尋關鍵字"windows terminal",安裝它。

    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →

windows terminal可安裝可不安裝。
它是個好用的工具,可讓命令提示視窗向瀏覽器那樣開分頁,當一個專案需將前端、後端、DB拆成三包專案來開發時,就能用三個分頁去Run專案不會開一堆視窗。
另外也能儲存一些常用的連線設定,不需要每次遠端連線都像智障打那一串ssh


NPM

  • 全稱 Node Package Manager,即「node套件管理器」,是Node.js預設的、用JavaScript編寫的軟體套件管理系統。
  • NPM是一個優質的套件管理工具,可以管理本機專案的所需模組並自動維護相依性,也可以管理全域安裝的JavaScript工具。
  • 唯一缺點就是沒有GUI(圖形介面),只能在cmd下指令使用。
  • NPM會隨著Node.js自動安裝,所以不需要管它(?)。

Node.js

就開發環境,沒啥好說(?)
進入官網下載最新版本的LTS安裝檔(目前最新v18.16.1),執行exe檔狂按下一步然後安裝就好了。

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

安裝好以後可以在cmd打以下指令試試:

$ node -v

如果出現以下畫面代表安裝成功:

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
建立Node.js專案指南:建立Node.js Express專案


NVM

NVM 為 Node Version Manager 的縮寫,顧名思義就是「Node 版本管理控制」,常用的功能包含:

  • 切換 Node.js 的版本
  • 使用特定 Node.js 作為預設啟用環境
  • 安裝不同的套件至特定的版本上

使用 NVM 已經是 Node.js 開發者必備的工具,它最大的用途在於可以輕鬆切換不同版本的 Node.js,尤其在後端的專案中,團隊需要統一的開發環境時可以精確切換到同一個 Node.js 子版本上,避免發生版本不同所發生的問題。

  1. 到NVM的GitHub 下載安裝檔,我找好Windows版的了,在這裡
  2. 下載nvm-setup.exe檔案。
  3. 執行exe > 瘋狂下一步 > 安裝 > 完成!(?)。

安裝好以後可以在cmd打以下指令試試:

$ nvm

如果出現以下畫面代表安裝成功:

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
跟NVM有關的指令可以參考這裡:
NVM 常用指令(Node.js版本管理工具)


VSCode

總要有個能寫Code的地方對ㄅ(X

  1. 進入官網看到那顆超大的"Download for Windows"按鈕,按下去。
  2. 一樣執行exe檔 > 下一步直到安裝完成。
  3. VSCode預設是原文,如果跟我一樣有英文障礙,安裝後請開啟VSCode,點左邊清單最後一個有四個小方塊的圖示。
  4. 搜尋"chinese",選擇「中文(繁體)」那個按下「Install」,然後重啟VSCode。
    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →

參考資料:
WSL:Windows 使用者也能有個像樣的指令介面
維基百科-NPM
卡斯柏-安裝nvm環境,Node.js開發者必學(Windows、Mac 均適用)