# 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() ```javascript= 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 預設提供的套件管理工具 ```bash= 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，並進入目錄 然後輸入 ```bash= npm init -y ``` --- 此時目錄裡就會產生一個 package.json  --- 在這裡示範從 npm 載 react 的函式庫回來 ```bash= npm i react ```  **npm i** 是 **npm install** 的簡短寫法 --- 在這裡示範從 npm 載 eslint 的函式庫回來 指令增加了 -D 的參數 ```bash= 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#/)