Web開發學習筆記18 — 開始使用Node.js、npm

什麼是Node.js？

簡單來說，Node.js就是能夠在伺服器端運行JavaScript的開放原始碼。我們用JavaScript開發網頁時，並沒有安裝什麼軟體就可以運行程式是因為瀏覽器幫我們實現了程式的運行，換而言之，Node.js會缺少一些客戶端有的語法，像是DOM或Event，但能夠在伺服器端運行的Node.js也多了很多其他的功能。

Node.js可以做到什麼？

Web Server
Command Line Tools
Native Apps（例如：VSCode）
.
.
.

創立一個自動化資料夾

運用node.js和terminal寫出一個可以自動化建立資料夾，並附帶index.html、style.css、app.js三個檔案。

const fs = require('fs');  //fs要先require
const folderName = process.argv[2] || 'Project' //default名字
try {
    fs.mkdirSync(folderName);
    fs.writeFileSync(`${folderName}/index.html`, ""); //要輸入第二參數
    fs.writeFileSync(`${folderName}/style.css`, ""); //要輸入第二參數
    fs.writeFileSync(`${folderName}/app.js`, ""); //要輸入第二參數
} catch (e) {
    console.log(e);
}

module與module.exports

在node.js裡每一個JavaScript檔案都會被看成一個獨立module（模組），如果想要導出給其他模組使用，就必須使用module.exports與require。使用module.exports把模板導出，最後會再用require引入模板。
範例：

//math.js
const pi = (3.14)

const add = function(x, y) {
    return x + y;
}
const square = function(x) {
    return x * x;
}

module.exports.pi = pi;   //導出模板
module.exports.add = add;
module.exports.square = square;

//app.js
let math = require('./object.js');  //引入模板
console.log(math.pi);
console.log(math.square(8));
console.log(math.add(2, 3));

//app.js也可以寫成這樣：
let {pi, add, square} = require('./object.js');  //在此層資料夾中/引入模板
console.log(pi);
console.log(square(8));
console.log(add(2, 3));

或是寫成這樣更簡潔：

//math.js
let math = {
    pi: 3.14,
    add: function(x, y) {
        return x + y;
    },
    square: function(x) {
        return x * x;
    }
}

module.exports = math;

結果：

module.exports與exports

exports其實就是module.exports的縮短寫法（shortcut），參照node.js官網。
但要注意一點，不要把exports當成變數亂改，因為會照成module.exports指向錯誤。
正常狀況：

//text.js
let text = "Hello"
exports.text = text

//app.js
let { text } = require('./object.js');
console.log(text);   //Hello

改到exports的值：

//text.js
let text = "Hello"
exports = {}   //把module.exports指向空物件
exports.text = text

//app.js
let { text } = require('./object.js');
console.log(text);   //undefined

解決辦法：

let text = "Hello"
exports = {} = module.exports  //把exports重新指回module.exports
exports.text = text

//app.js
let { text } = require('./object.js');
console.log(text);   //undefined

什麼是npm？

nmp（Node Package Manager)是一個軟體套件管理系統，可以下載許多Javascript套件來使用。

開始使用npm

安裝npm

node.js在0.6.3版本開始內建npm，所以先裝node.js後可以不用另外再裝npm。
官網下載node.js
下載好node.js可以用npm -v檢查當前npm版本：

建立package.json

在開始安裝套件使用前，我們需要先為專業建立一個檔案：package.json，要建立package.json很簡單，在Terminal上打上npm init，沒有特殊要求就先一直enter下去。

git repository:
- 先在github開一個新的專案，再將url輸入進去

安裝套件

在terminal輸入npm install [套件名稱]或是npm i [套件名稱]。或許會看到還有這種寫法：npm install [套件名稱] --save，不過自從npm 5.0.0版本後--save就變成預設了，所以不用另外寫，也可以將新增的套件名稱加在package.json檔案中的dependencies欄位。
（dependencies代表我們在此專案用到的套件們有哪些）：