# NodeJS 入門補帖
###### tags: `Node.js`、`npm`、`JavaScript`

## Index

記錄學習 Node.js 的學習路徑和資源，包含 Node 本體、 npm、npx 套件管理與 node 之版本控制，延伸到 webpack 這個好用的打包套件。

### Node.js 本體
一開始使用 Node 的時機，是透過 npm、npx 等指令，導入原生模組或其他人寫好的 package，來增加開發速度。
- 工程師素養--從閱讀官方文件開始：[LTS Docs](https://nodejs.org/dist/latest-v16.x/docs/api/)
- 為什麼要學Node.js的原因和優缺點：[Hiskio 完整懶人包](https://blog.hiskio.com/what-is-node-js/)
- [簡中入門大全](http://nodejs.cn/learn/introduction-to-nodejs)
- [NodeSchool](https://nodeschool.io/)

### npm、npx & 版本控制
- [npm Docs](https://www.npmjs.com/)
- [nvm repo](https://github.com/nvm-sh/nvm#install--update-script)
- [Install nvm](https://www.casper.tw/development/2022/01/10/install-nvm/)

### Webpack (待補)

## Node.js是什麼？

根據官方網站的說法：
>Node.js is an asynchronous event-driven JavaScript runtime.

看到這句話可能會有點一頭霧水，首先，asynchronous 指的是**非同步**，在程式碼的執行中，會分成同步和非同步，非同步的事件通常需要一點時間，像是跟伺服器請求某些資料，需要時間等待接收請求、將資料傳回客戶端，這個過程就屬於非同步事件，更詳細的內容，可以看看 AJAX 相關的教學文章。

event-driven，我自己是腦補成**事件觸發**，但實際上它是一種程式的架構(architecture)，叫做**事件驅動**。

而JavaScript runtime，這就有點難理解了，首先，Node.js是利用Chrome V8 Engine 提供的、使用C++寫成的 API，來進行程式碼編譯(Compile)，讓我們可以直接在終端機上使用JavaScript。

## 環境建置

可以直接到[Node.js官方網站](https://nodejs.org/en/)，安裝好LTS版本的Node.js，選這個版本，是因為最新版本對於新手來說，有些功能可能還沒有非常穩定，所以推薦先使用LTS版。

下面是一些基本的操作指令：
1. 查看版本 `node -v`
2. 使用、更新不同版本的node.js `nvm`
3. 用cmd輸入`node` ，可以進到node.js的環境內
4. `node app.js` 開啟app.js這個檔案
5. ctrl+c 或輸入`.exit` 停止node.js的進行

但一般來說會在指定專案的資料夾內使用Node，所以我們可以依照下面的步驟來新增專案資料夾、開啟編輯器(我使用的是VSCode)：

cd documents
cd (指定放置的資料夾名稱)
mkdir (在裡面新增一個資料夾)
cd (剛剛新增的資料夾名稱)
code . (開啟VSCode，在剛剛新建好的資料夾裡)

## 試著建立一個web server吧

//呼叫 node 的原生模組(core module)--http
var http = require('http');
//建立server
http.createServer(function(req,res){
    console.log(req);//當重新整理頁面時，在cmd會跑出request，也就是client端的資訊
    //傳回http status code 和指定的內容類型(這裡是文字檔)
    res.writeHead(200, {'Content-type':'text/plain'});
    //顯示字串
    res.write('hello!');
    //回應結束
    res.end();
}).listen(8080);//在port8080監聽

完成這個步驟之後，在瀏覽器輸入localhost:8080之後，會看到以文字形式呈現的頁面內容:
也可以到 DevTools 裡的 Network 看看請求和回傳的資訊。

至此，我們已經成功建立了一個簡易的 web server!

## 額外學習文章
1. [HTTP內容類型&內容編碼@NotFalse技術客](https://notfalse.net/40/http-representation)