如何建立一個Node.js + Express 專案(Mac)

Jarvis Huang

Published in

學海無涯

6 min readJun 9, 2019

這週學習到了如何建立一個Node.js + Express 的專案。因為有一些相關的軟體需要安裝和設定，所以就記錄了這些步驟。

事前準備

因為之後的步驟都需要透過Terminal來執行，所以需要先進行一些環境設定：

1、安裝Xcode。

2、安裝Visual Studio Code。

設定Terminal

1、開啟Terminal

2、輸入下面指令開啟bash_profile：

code ~/.bash_profile

3、VS Code視窗開啟後，貼上以下程式碼：

function parse_git_dirty {
  if [[ $(git status 2> /dev/null | tail -n1) == "nothing to commit, working tree clean" ]]; then
    echo "✔ "
  else
   echo "✘ "
  fi
}

function git_branch {
    ref=$(git symbolic-ref HEAD 2> /dev/null) || return;
    echo "("$(parse_git_dirty)${ref#refs/heads/}") ";
}

if [ -f $HOME/.bashrc ]; then
        source $HOME/.bashrc
fi

export PATH=$HOME/bin:/usr/local/bin:$PATH
export PS1="[\[\e[1;32m\]\w\[\e[0m\]] \[\e[1;36m\]$(git_branch)\[\e[0m\]$ "

4、存檔後，關掉並重啟Terminal，會發現指示字元已經改變：

安裝NVM(Node Version Manager)

註：nvm是Node.js版本管理的工具，可以進行Node.js不同版本的切換

1、開啟Termnial，執行下列指令：

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash

2、安裝完成後，關閉並重啟Terminal。輸入下列指令確認是否安裝完成：

command -v nvm

安裝Node.js

安裝完nvm之後，就可以進入主題：透過nvm來安裝Node.js。

首先，什麼是Node.js？

Node.js是一個Javascript的執行環境(Run-time Environment)。最一開始我接觸Javascript的時候，都是在瀏灠器上的dev tool裡執行。但如果安裝Node.js之後，就可以透過terminal去執行Javascript的檔案。而Javascript 也可以直接建立、讀取、更新和刪除(CRUD)電腦內的檔案，並且能和資料庫連結。另外，Node.js也加了網路應用程式所需要的功能，例如做為一個伺服器處理客戶端發出的Request並給予Response。

查看Node.js版本

開啟Terminal，並執行下列指令：

nvm ls-remote

Terminal會秀出所有Node.js版本，其中有些版本會備註是LTS(Long Term Support)版本。LTS版本指的是官方會持續維護這個版本比較長一段時間，使用上會比較穩定。

因為在寫這篇文章的時候，目前最新的LTS版本是10.16.0，因為我會選擇安裝10.16.0。開啟Terminal 並執行下列指令：

nvm install 10.16.0

安裝完成後，可以使用 nvm use 這個指令，告訴nvm 我要使用v10.16.0這個版本：

nvm use 10.16.0

註：如果之後想要切換到其它Node.js版本，就可以用 nvm use 來切換。

如果想知道目前正在使用的Node.js版本，可以輸入以下指令來查看：

node -v

建立第一個Node.js 專案

當完裝完成Node.js 之後，就可以來建立一個Node.js 專案。

1、開啟Terminal，執行下列指令建立一個資料夾：

mkdir Project

2、進入資料夾，並快速初始化專案：

cd Project 
npm init

註：npm(Node Package Manager)是一個套件管理器，我們在安裝Node.js的時候會一起安裝npm。在開發程式的時候，會有許多開發者開發好用的Javascript 工具，為了把這些工具都統整在同一個地方，讓開發者方便搜尋和使用，於是就有了npm。

執行上述指令之後，會發現資料夾裡面多了一個package.json 的檔案。這個檔案記錄了這個專案的基本資訊：

name: 專案名稱
version: 專案版本
description: 專案描述
main: 專案入口
scripts: shell腳本。(透過 npm run 腳本名稱 執行)
keyword: 關鍵字，用於npm分類搜尋。
dependencies: 專案有使用到的套件。若使用 npm install 指令，npm 會依據這個屬性安裝所需要的套件。以下圖為例，這個專案有使用到Express套件，版本為v4.17.1。

到這裡我們已經成功建立一個Node.js專案，接著我們再來安裝Express 套件。

什麼是Express？

Express 是一個可以在Node.js 上使用的網路框架，它能讓開發者方便的建立網頁應用程式的工具，就像是一個工具包的概念。

安裝Express

1、開啟Terminal，並執行下列指令：

npm  install express

執行完之後，會發現資料夾裡多了一個package-lock.json 檔案和node_modules 資料夾。package-lock.json 這個檔案會詳細記錄每一次我們使用npm 安裝了什麼，主要是讓npm在執行的時候參考用的。node_modules 資料夾裡面存放了所有安裝下來的套件，如果專案有需要用到這些套件，就可以直接載入它們來使用。

到目前為止，我們已經成功建立一個Node.js + Express 的專案。接著，就可以開始開發網頁了。