Node.js
Node.js
基於 Chrome V8 引擎的 JavaScript 執行環境
使用事件驅動，非阻塞型 I/O
套件管理工具是 npm，是現在世界上最大的 open source 庫
簡單說 Node.js 就是用 JavaScript 來寫後端並編譯執行的環境
就像是
| 網頁伺服器 | 後端程式語言 |
|---|---|
| Apache | PHP |
| IIS | C#, VB |
| Node.js | JavaScript |
雖然是用 JavaScript 來寫程式，但這些都是後端用的，寫前端也需要懂這些？
Node.js 問世，套件管理工具 npm 誕生開始
透過 npm，開發者便能快速且輕易的從 npm 下載到許多第三方套件
前端開發人員可以用到這些套件來做轉譯程式碼、優化專案內的各種不同檔案、測試等等的用途
優化
像是需要壓縮或合併 JS/CSS 來減少檔案的大小，降低開啟網頁的負載
轉譯
編譯 ES6+ 的 JS 程式碼來相容低版本的瀏覽器
React 用的 JSX
Vue 用的 .vue 檔
都要轉譯成瀏覽器看得懂的形式
自動辨別 CSS 程式碼的屬性來幫你加各家瀏覽器需求的前綴 （-webkit-、-moz-）
自動化
自動化打包，只要先寫好設置或腳本
依照腳本不同，可以用來區隔開發時的程式碼及產品發布時的程式碼
這些工具在 npm 上通通都找得到
並且開源可隨便你用
所以說 Node.js 的出現是前端工程化的重要里程碑
接下來會簡單介紹 Node.js 安裝及執行
首先要先下載安裝
進入 https://nodejs.org/en/ 的官網
下載完成後點開執行檔
然後就是 Next -> 我同意 -> 選安裝路徑 … 省略 … 等待安裝 -> 完成
安裝完成後 node 會自動新增進系統環境變數路徑
npm 也會隨附著一起安裝完成
簡單使用一次 node 來執行 index.js
node 指令所執行的 js 檔案可是在 Node.js 伺服器上執行的呢！
與在 browser 上跑的時候相比可是有很多核心運作的環境變數是不一樣的！
像是 window，document 這些環境變數可是不存在於 Node.js 環境之中
簡單實驗個 console.log(window); 看看
那 Node.js 環境是可以用來做什麼呢？
在 Node.js 的官網上有一個 DOCS 的 link
在 Node.js 環境要玩的就是這一堆後端核心函式庫
展示使用 http 的模組
剛剛提到了模組
在 index.js 的第一行的程式用了 require()
const http = require('http');
Node.js 的模組是基於 CommonJS 模組規範
npm (Node Package Manager)
它是 Node.js 預設提供的套件管理工具
npm install <要安裝的第三方函式庫名稱>
透過指令來下載 npm 上的第三方函式庫或模組
就像是 Linux 有 apt-get，C# 有 NuGet，PHP 有 Composer 等等的這些指令
npm 上的第三方函式庫可不僅僅只有 for 後端
許許多多前端常見的東西也通通都可以載得到
像是 JQuery、bootstrap、lodash…等等
只要透過 npm 來下載並使用這些前端或後端的工具
就能夠更方便有效的管理專案內依賴的函式庫
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 端（瀏覽器上）使用的函式庫
例：JQuery、bootstrap、lodash
devDependencies 主要是存放 Node.js 環境使用的函式庫
例：打包工具 webpack、Coding Style 檢查工具 eslint
掌握了 npm 的使用操作後
接下來要講解 ES6（ECMAScript 6）的部分
tags: 前端
下一章： ES6