[NodeJS Become A Full Stack Developer] — 從0開始 NodeJS 小試身手

Introduction & 前言

接觸程式近一年半多，常常想一虧後端的樣貌，想知道整個程式流程是怎麼跑的，甚至想要試試看寫出從前到後的 Side Project，如果你也對後端有點興趣，就跟著筆者一起往下學習吧！這是筆者接觸的 第一個後端語言，所以不會有太過艱深的研究或是內容。

---

Summary & 摘要

沒有錯！這次也是照著六角學院線上課程 NodeJS 前後端開發實戰 學習筆記，好處是隨時想進行就進行學習，缺點也顯而易見就是太懶惰可能會讓課程擺著生灰塵(有興趣參考 線上課程 vs 直播課程 八週總結心得 )，鑑於以往筆記過長，這系列會使用簡短且重點筆記。

---

簡短介紹

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

Node.js 使用了 V8 引擎，而它是一個能夠執行 JS 的環境，而 V8 專案也是開源的，有興趣可以參考此處。

而 Node.js 的出現，使得原本在前端已經被廣泛的運用，甚至可以只靠 JS 就從前端寫到透端；由於很多前端工程師在接觸 前端三寶(HTML、CSS、JS) 之後，往往想一虧後端都會不知所措，甚至需要重新適應一個後端語言，因為 Node.js 讓前端可以輕鬆的就入門。

---

初試啼聲

如何開始

一開始我們可以上 Node.js 的 官方網站 下載，這邊會有兩個版本，左邊代表比較穩定的版本，通常建議新手或是不熟的人先下載這個，而右邊那個則是最新版本，如果想試試新功能，可以選擇這一個，下載安裝完後打開中關機輸入以下指令即可查看是否安裝成功及版本號：

node --version

點選下方的 Long Term Support (LTS) schedule. 可以看到個版本的時間軸，比方說預期什麼版本預期維護到什麼時候。

簡單上手

在終端機輸入 node，即會進入 node 的環境，在這裡面可以寫任何的 JS，但我們通常不會這樣子做，我們會寫在檔案上，再交由 NodeJS 去執行，所以你可以試著創立一個 app.js，然後在裡面輸入下面內容：

console.log('Hello NodeJS!!');

隨後打開終端機輸入 node app.js(記得要在同一層！)，就會出現 Hello NodeJS!!。

---

模組介紹

原生的 NodeJS 其實裡面幫我們包含了很多東西，可以想像成 JS 有很多原生用法，比方說原生的 JS 可以直接使用 console.log() 或是 new Date()，可以參考 node git lib。

全域物件

值得先提的是關於全域這件事情，在 JS 裡面最外層是 window，而 NodeJS 因為下面可能會有好幾個 JS ，所以最外層則是 global，如果你在檔案 A 想要檔案 Ｂ 吃得到這個變數，就必須要用 global，如下圖：

檔案橋樑

那如何讓檔案能相互溝通了，就必須依靠 require() 及 module.exports 或 exports，當一隻檔案要讓另一隻檔案引入的時候必須要先指定這隻檔案要輸出什麼東西，比如下方(B.js)：

var myName = '王小明';

exports.name = myName;

或

var myName = '王小明';

module.exports = {
  name: myName
};

基本上都會推薦第二種寫法，簡單明瞭，而且主要的重點是，這兩種方法絕對不可以共用，如果共用後面的會把前面的覆蓋過去。

那需要引用的檔案就更簡單了，只需要使用 require() 即可，如下(A.js)：

var nameInfo = require('./B.js');
console.log(nameInfo.name); // 王小明

又是一把釣竿

那我們該怎麼入門使用 Node.js 呢？上面提到，原生的 Node.js 就有提供幾種 API 可以使用，首先到官方網站的 **Documentation**，然後找到適合自己的版本，這邊拿 v12.16.1 來舉例，滑到下面找到該版本的指南 Node.js 12.x 點進去。

這時候會發現左邊有很多 API，這些都是原生的方法，裡面也紀錄了該怎麼使用，這邊先舉經典的 HTTP 為例吧！

一樣新增一支 App.js，所有要應用到的方法起手式都是上面提到的 require()，先載入進來，才能使用，所以照下面程式碼寫：

var http = require('http');

http.createServer(function(request, response){
  // request -> 請求來源相關資料
  // response -> 伺服器(Node.js 這邊)回覆相關資料
  response.writeHead(200, { "Content-Type": "text/plan" });
  response.write('Hello Node.js!!');
  response.end();
}).listen(8080);

接著打開終端機，在跟 App.js 同一層的情況下輸入 node app.js，然後打開網頁輸入 http://127.0.0.1:8080，就會看到 **Hello Node.js!!**。

整體流程

在上面 createServer() 裡面的 request 可以取得不少使用者的資訊，比方說 request.url，而這時候就可以透過 url 去實作 router 的分配，到這邊有沒有感覺已經踏上後端之路了呢？

上圖省略了去資料庫拿資料及資料呈現是交由前端或是後端 **SSR(Server-Side Rendering)**，但整個 要求(request) 跟 回應(response) 差不多是這麼一回事。

關於路徑

上面提到 router，而在我們使用後端語言常常會使用到路徑，常見的 Node.js 路徑有幾個常用的東西，像是 __dirname(資料夾路徑) 或 __filename(檔案路徑)，這兩個在 VSCode 除錯模式可以看見，

這邊就會提到關於 Node.js 就提供了另一個很有用的 API -> **path**，使用方式跟上面起手式一樣，並示範幾個基本的方法：

var path = require('path');

// 讀取目錄路徑
console.log(path.dirname('/a/b/c.js')); // /a/b
// 路徑合併
console.log(path.join(__dirname, 'c.js')); // /User/xxx/Desktop/c.js
// 讀取檔案名稱
console.log(path.basename('/a/b/c.js')); // c.js
// 讀取檔案副檔名
console.log(path.basename('/a/b/c.js')); // .js

// 讀取所有資訊 包含路徑 檔案名稱 副檔名 檔案名稱(不包含副檔名) - 組合包
console.log(path.parse('/a/b/c.js')); // 回傳 Object { root: '/', dir: '/a/b', base: 'c.js', ext: '.js', name: 'c' }

注意！上方的資訊只是把你輸入的路徑分析出來，如果後方輸入不存在的檔案，也是會有結果的，如下圖。

---

Conclusion & 結論

這邊只是簡短的紀錄並介紹 Node.js，而 Node.js 其實強大且豐富，不是三言兩語就能介紹完畢，由於原生的方法沒辦法滿足所有情況，所以在開源的情況下，大家又會各自開發功能並且發布出去，使得 Node.js 越來越豐富，類似於前端的套件，前端只需要 CDN 就可以使用，而後端一定要 npm install(關於 npm 介紹可參考 [Tool Notes] — 關於Webpack #1 - 第一次就上手) 後並且使用起手式 require 才能使用；你可能會想，每次建立後端都這麼麻煩嗎？後面我們將會繼續提到如何快速建立後端環境、如何應用。

對於後端矇懞懂懂的我如果有誤還請各位手下留情，所有的比較資料來源幾乎都是從課程上得知或上網爬文學習。

---

參考網站

• V8 Git

• NodeJS

• Day 4 - 一周目- 用VSCode debug 模式，玩玩 ES6 常用語法

• [Tool Notes] — 關於Webpack #1 - 第一次就上手

• [Hexschool Web Layout Training] — 八週總結