Node.js 與 Express 基本介紹

TC
5 min readSep 24, 2022

--

Node.js 是一個開源、跨平台和允許開發者使用 JavaScript 創造 “伺服器“ 的工具和應用的執行環境 (run-time environment),讓 JavaScript 不再需要依賴瀏覽器,可以直接在 “電腦的終端機” 或是 “伺服器” 上直接執行程式碼。

Q: 如何安裝 Node.js?

A: 【建議】使用 nvm (Node Version Manager)

使用 nvm 可以讓開發者可以在電腦上同時安裝並切換使用不同版本的 Node.js,因為實務開發時,很常碰到不同專案使用不同版本 Node.js 的情況。如果不是使用 nvm,而直接從官網下載 Node.js 的話,你就無法切換版本。

> 使用終端安裝 nvm:https://github.com/creationix/nvm (github網址)

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

> 安裝完畢後,重啟終端後,輸入node 即可進入 Node.js REPL 環境 (Read-Eval-Print-Loop),可以定義變數、執行算式、直接印出結果,如下:

> 接著你就可以使用 Node.js 建立伺服器了!

可以移至【如何用 Node.js 建立一個伺服器】
https://link.medium.com/sl7YzOUAAtb

等你試著用 Node.js 建立完伺服器後,你會發現,可以把 Node.js 解釋成用來做 “簡單的” “網站伺服器開發”,它並不原生支持其他常見的 web 開發任務,如果想為不同的 HTTP 方法 (ex: GET, POST, DELETE等) 增加特定的處理、替不同的 URL 路徑提供靜態檔案、使用樣版或是動態性的產生 response,就需要自己完成相關的程式。

當然,我們可以不用走上開發程式這個艱辛的旅程,可以直接使用 web 框架,也就是 Node web 最常用、也最受歡迎的框架 Express。那 Express 到底是什麼,跟 Node.js 的差別在哪裡?

Express 是「網路框架」(web framework)的一種,是一套可以在 Node.js 上使用,內含需多功能、特性、豐富的 HTTP 工具,也就是說,Express 就是一個讓開發者能更方便地建立網頁應用程式的工具包。

Q: 如何安裝Express?

A: 使用 npm (Node Package Manager)

npm 是 Node.js 的套件管理器,在程式開發的領域中,有許多開發者會開發好用的 JavaScript 工具,分享給大家使用,為了把這些工具都統整在一個地方,讓開發者方便搜尋和使用,於是就有了 Node 套件管理器。使用者可透過指令方式從平台上下載不同的 JavaScript 的工具。

npm 官網:https://www.npmjs.com

官網中有各式各樣用 JavaScript 撰寫的工具包,在這裡幾乎可以找到所有需要使用到的工具。

【建議】通常我們在使用 express 時會一起下載 express-handlebars,中文翻譯就是『樣版引擎』

什麼是 express-handlebars 樣板引擎?

樣版引擎會把帶有 HTML 內容的「樣板檔案」 (template files) 轉換成真正的 HTML 檔案再回應到瀏覽器上。這將會大幅提升未來前端再處理網頁頁面的靈活度!

> 使用 npm 安裝 express 以及 express-handlebars

step 1. 在安裝 express 之前,需要在專案資料夾中建立一支名為 package.json 的檔案,這個檔案會記錄當前專案資料夾中已經安裝了哪些來自於 npm 的套件,還有一些和這個專案相關的資訊。

npm init -y

·init :是 initializer 的縮寫,也就是「啟動器」的意思。
·-y : 若你只輸入 npm init 而沒有後面的 -y,npm 一樣會幫你建立 package.json 這支檔案,但要手動輸入很多設定。一般在開發時可以先用 -ypackage.json 建立好,之後若有需要再透過編輯器去修改這個 package.json檔案。

step 2. 透過 npm install 指令安裝 express

npm install express@[版本號]

step 3. 透過 npm install 指令安裝 express-handlebars

npm install express-handlebars@[版本號]

> 接著你就可以使用 Express 打造網頁了!

可以移至【如何使用 Express 撰寫網頁】
https://link.medium.com/sl7YzOUAAtb

在使用 Express 開發網頁時,你會發現這個工具包可以讓架設網頁變成一件比較輕鬆的事!但你也會發現有很多 Express 套件、工具的用法需要去了解,像是 Handlebars 就是其中一個樣版引擎套件。

結語:

Node.js 環境裡能夠建立了伺服器,但該網站屬於 “簡單開發”,如果想開發功能健全的網站,我們通常會請 Web 開發框架,也就是 Express 來幫忙做這件事。

這邊簡單歸納出 Express 與 “直接使用” Node.js 的不同之處:
☑️ Express 可以自動載入 http 模組
☑️ Express 可以設定路由
☑️ Express 可以自動設定適當的回應內容類型
☑️ Express 把一般的狀況自動處理掉,讓程式碼跟簡潔,開發速度更快速

文章中提及到的相關文章與網址:

> nvm github網址
https://github.com/creationix/nvm (github網址)

> npm 官網
https://www.npmjs.com

> 如何用 Node.js 建立一個伺服器
https://link.medium.com/sl7YzOUAAtb

> 如何用 Express 打造網頁
https://link.medium.com/QaIIxWLCAtb

--

--