[Node.js] NPM 套件管理工具

NPM 套件管理工具

前面文章介紹使用 fs 檔案系統的 Node.js 內建模組，但如果我們想使用一些其它的第三方軟體套件來獲得其它的功能且不在內建模組裡，怎麼辦?

我們可以使用 npm（Node Package Manager，「node包管理器」）來安裝，透過 npm 將 Node.js 程序包直接從電腦上或是單一個專案安裝、更新或刪除，這些程序包有很多種類，例如前端框架 Vue、React … 等。

想要搜尋有什麼樣的套件以及如何使用可以到 npm 的網站，只要在網址輸入 npmjs.com

在 search bar 輸入想安裝的套件，如 express

點擊 express，可以看到如何安裝及使用

安裝全域套件 nodemon

這裡就來實際安裝一個套件示範，前面筆記在執行 server.js 時，伺服器處於不斷監聽的狀態，每次改變了 server.js 的 code，都要終止監聽然後再執行，這在開發中很是麻煩。

現在來安裝 nodemon 的套件可以幫助我們實時的重新加載(刷新)伺服器，加快開發速度。

在 npm 網頁搜尋 nodemon 套件

往下拉來到安裝的部分，安裝方式有兩種，這裡選擇推薦的 -g 全域安裝

在全域安裝表示不只可以用在當前的專案項目，將來其它的專案也可以任意使用。

接著在終端輸入指令安裝

安裝完後就可以使用了，可以看 nodemon 的 Usage 使用教學再來操作，這裡直接示範。
前面執行 server.js 時，輸入 node server，這裡改為 nodemon server 也有一樣的效果，立即在端口 3000 進行監聽

除此之外它還設置了實時重載伺服器，監視著我們的 code

例如我們可以將上一筆記中的 server.js 代碼中， switch 的 case '/about-me' 改成 case '/about-us'，並儲存

case '/about-us': // 原本為 '/about-me'
    res.statusCode = 301;
    res.setHeader('Location', '/about');
    res.end();
    break;

全部的 code

const http = require('http');
const fs = require('fs');

const server = http.createServer(( req, res) => {
    let path = "./views/";
    switch(req.url) {
        case '/':
            path += 'index.html';
            res.statusCode = 200;
            break;
        case '/about':
            path += 'about.html';
            res.statusCode = 200;
            break;
        case '/about-us':
            res.statusCode = 301;
            res.setHeader('Location', '/about');
            res.end();
            break;
        default:
            path += '404.html';
            res.statusCode = 404;
            break;
    }
    
    res.setHeader('Content-Type', 'text/html');
    fs.readFile(path, (err, data) => {
        if (err) {
            console.log(err);
            res.end();
        } else {
            // res.write(data);
            res.end(data);
        }
    });
});

server.listen(3000, 'localhost', () => { 
    console.log('listening for requests on port 3000');
});

可以從終端機發現由於更改而重啟了伺服器

現在可以去網址直接輸入 localhost:3000/about-us，結果引導到 /about 頁面。

另外再次輸入 localhost:3000/about-me，結果也還是引導到 /about 頁面，
關於這點開啟開發人員工具的 Network 發現 response headers 的 Location 仍為 /about 。
如果將其改掉我想就不會再引導到 /about 頁面了，但筆者沒有試這部分。

安裝 nodemon 套件讓我們不必在每次更改 code 後還要手動重新啟動伺服器。

下面接著說安裝於特定專案項目的套件

package.json

在說明本地安裝套件前先了解 package.json 這個檔案，名為 package 的檔案是一個 JSON 檔，它可以用來跟蹤我們安裝到專案的套件。

在終端機輸入 npm init 初始化，會詢問一些與專案相關問題，可以一直按 enter，最後就會產生 package.json

確認 package.json 輸入的資訊

最後產生 package.json

package.json 內容

在本地安裝軟件包

有了 package.json 後，可以開始將套件安裝到本地專案，這裡示範安裝 lodash 的套件

可以透過 npmjs.com 搜尋 lodash

該頁面的右側有 lodash 的首頁，包含了 lodash 的文件

lodash 的主要功用是能消除 javascript 在 arrays, numbers, objects, strings 等處理上的麻煩，使其變得容易，這點在 lodash 的首頁便表達了，不過本筆記重點在於安裝本地套件，所以沒有多研究 lodash。

安裝 lodash 在終端機輸入 npm install --save lodash

install 也可以使用 i 縮寫，注意 --save 表示將套件寫入 package.json 裡的 dependencies 依賴項目，另外若 Node.js 是較新版本的則也可以省略 --save，不確定的話就加上 --save 沒問題。

安裝好 lodash 後，再來看看 package.json 多出了 dependencies，並且包含了 lodash 項目，之後安裝其它的套件也都是包含在 dependencies 其中，這樣我們就可以追蹤我們在專案使用了哪些套件。

另外可以看到專案中新增了 node_modules 資料夾，其中包含的就是我們下載安裝的套件模組，但我們可以不用管它

接著開始使用 lodash 的功能，首先導入 lodash 就像導入內建模組一樣，而之所以接收導入的常數命名為 _ 是因為官方文件推薦的方式，當然你要用其它命名也無所謂

1	const _ = require('lodash');

隨便使用一項 lodash 的功能，如 _.random() 會隨機產生數字

1
2
3

// lodash
const num = _.random(0, 20); // 隨機產生 0~20 之間的數字
console.log(num);

將這段放在伺服器接收到請求，就會隨機列印出 0~20 的數字

const http = require('http');
const fs = require('fs');
const _ = require('lodash');

const server = http.createServer(( req, res) => {
    // lodash
    const num = _.random(0, 20); // 隨機產生 0~20 之間的數字
    console.log(num);

    let path = "./views/";
    switch(req.url) {
        case '/':
            path += 'index.html';
            res.statusCode = 200;
            break;
        case '/about':
            path += 'about.html';
            res.statusCode = 200;
            break;
        case '/about-us':
            res.statusCode = 301;
            res.setHeader('Location', '/about');
            res.end();
            break;
        default:
            path += '404.html';
            res.statusCode = 404;
            break;
    }
    
    res.setHeader('Content-Type', 'text/html');
    fs.readFile(path, (err, data) => {
        if (err) {
            console.log(err);
            res.end();
        } else {
            // res.write(data);
            res.end(data);
        }
    });
});

server.listen(3000, 'localhost', () => { 
    console.log('listening for requests on port 3000');
});

執行並連上 localhost:3000

重新整理頁面發送請求

以上為在本地專案安裝 lodash 第三方套件的範例

dependencies & 共享代碼

接下來說一下共享代碼這件事，以 github 舉例，這裡只講解概念、不說太詳細的操作，github 可以是一個共享專案項目代碼的平台，我們可以將我們的專案檔案上傳提供他人下載，但上傳時通常都不會上傳 node_modules 資料夾，因為容量太大，也就是說以下的檔案除了 node_modules 資料夾外都會上傳。