---
title: 'Node.js'
---

# Node.js


---

Node.js

基於 Chrome V8 引擎的 JavaScript 執行環境

使用事件驅動，非阻塞型 I/O

套件管理工具是 ==npm==，是現在世界上最大的 open source 庫
<!-- .element: class="fragment" -->

---

簡單說 Node.js 就是用 JavaScript 來寫後端並編譯執行的環境

就像是

| 網頁伺服器 | 後端程式語言 |
|---|---|
| Apache | PHP |
| IIS | C#, VB |
| Node.js | JavaScript |

---

### 雖然是用 JavaScript 來寫程式，但這些都是後端用的，寫前端也需要懂這些？

[Node.js](https://nodejs.org/en/)

---

Node.js 問世，套件管理工具 npm 誕生開始

透過 npm，開發者便能快速且輕易的從 npm 下載到許多第三方套件<!-- .element: class="fragment" -->

前端開發人員可以用到這些套件來做轉譯程式碼、優化專案內的各種不同檔案、測試等等的用途<!-- .element: class="fragment" -->

---

### 優化

像是需要壓縮或合併 JS/CSS 來減少檔案的大小，降低開啟網頁的負載

---

### 轉譯

編譯 ES6+ 的 JS 程式碼來相容低版本的瀏覽器

React 用的 ==JSX==

Vue 用的 ==.vue== 檔

都要轉譯成瀏覽器看得懂的形式

自動辨別 CSS 程式碼的屬性來幫你加各家瀏覽器需求的前綴 （-webkit-、-moz-）<!-- .element: class="fragment" -->

---

### 自動化

自動化打包，只要先寫好設置或腳本

依照腳本不同，可以用來區隔開發時的程式碼及產品發布時的程式碼

---

這些工具在 npm 上通通都找得到

並且開源可隨便你用<!-- .element: class="fragment" -->

所以說 Node.js 的出現是前端工程化的重要里程碑<!-- .element: class="fragment" -->

接下來會簡單介紹 Node.js 安裝及執行<!-- .element: class="fragment" -->

---

## 首先要先下載安裝

---

進入 https://nodejs.org/en/ 的官網


---

下載完成後點開執行檔


---

然後就是 Next -> 我同意 -> 選安裝路徑 ... 省略 ... 等待安裝 -> 完成

---

安裝完成後 node 會自動新增進系統環境變數路徑
npm 也會隨附著一起安裝完成


---

簡單使用一次 node 來執行 index.js


---

node 指令所執行的 js 檔案可是在 Node.js 伺服器上執行的呢！

與在 browser 上跑的時候相比可是有很多核心運作的++環境變數++是不一樣的！<!-- .element: class="fragment" -->

像是 window，document 這些環境變數可是不存在於 Node.js 環境之中<!-- .element: class="fragment" -->

---

簡單實驗個 console.log(window); 看看


---

### 那 Node.js 環境是可以用來做什麼呢？

---

在 Node.js 的官網上有一個 DOCS 的 link


---

在 Node.js 環境要玩的就是這一堆後端核心函式庫

https://nodejs.org/dist/latest-v12.x/docs/api/

---

展示使用 http 的模組


---

剛剛提到了模組

在 index.js 的第一行的程式用了 require()

const http = require('http');

Node.js 的模組是基於 CommonJS 模組規範<!-- .element: class="fragment" -->

https://zh.wikipedia.org/wiki/CommonJS<!-- .element: class="fragment" -->

---


---

### npm (Node Package Manager)

它是 Node.js 預設提供的套件管理工具

npm install <要安裝的第三方函式庫名稱>

透過指令來下載 npm 上的第三方函式庫或模組

就像是 Linux 有 apt-get，C# 有 NuGet，PHP 有 Composer 等等的這些指令

---

npm 上的第三方函式庫可不僅僅只有 for 後端

許許多多前端常見的東西也通通都可以載得到

像是 JQuery、bootstrap、lodash...等等

只要透過 npm 來下載並使用這些前端或後端的工具<!-- .element: class="fragment" data-fragment-index="1" -->

就能夠更方便有效的管理專案內依賴的函式庫<!-- .element: class="fragment" data-fragment-index="1" -->

---

## npm 操作說明

---

新建一個空白資料夾 D:\test，並進入目錄

然後輸入

npm init -y 

---

此時目錄裡就會產生一個 package.json


---

在這裡示範從 npm 載 react 的函式庫回來

npm i react


**npm i** 是 **npm install** 的簡短寫法

---

在這裡示範從 npm 載 eslint 的函式庫回來

指令增加了 -D 的參數

npm i -D eslint


**npm i -D** 是 **npm install --save-dev** 的簡短寫法

---

此時 test 目錄底下會多出另外兩個檔案


大多數情形不用特別開啟這兩個東西來查看

---

打開 package.json


---

### 放到 dependencies 或是 devDependencies 有什麼差嗎？

---

在前端的專案配置上

dependencies 主要是存放 client 端（瀏覽器上）使用的函式庫<!-- .element: class="fragment" -->

例：JQuery、bootstrap、lodash<!-- .element: class="fragment" -->

devDependencies 主要是存放 Node.js 環境使用的函式庫<!-- .element: class="fragment" -->

例：打包工具 webpack、Coding Style 檢查工具 eslint<!-- .element: class="fragment" -->

---

掌握了 npm 的使用操作後

接下來要講解 ES6（ECMAScript 6）的部分

---

###### tags: `前端`

下一章： [ES6](https://hackmd.io/p/H13__96nE#/)