npm與包

1. 包

1. 什麼是包

Node.js 中的第三方子產品又叫做包。

就像電腦和計算機指的是相同的東西，第三方子產品和包指的是同一個概念，隻不過叫法不同。

2. 包的來源

不同于 Node.js 中的内置子產品與自定義子產品，包是由第三方個人或團隊開發出來的，免費供所有人使用。

注意：Node.js 中的包都是免費且開源的，不需要付費即可免費下載下傳使用。

3. 為什麼需要包

由于 Node.js 的内置子產品僅提供了一些底層的 API，導緻在基于内置子產品進行項目開發的時，效率很低。

包是基于内置子產品封裝出來的，提供了更進階、更友善的 API，極大的提高了開發效率。

包和内置子產品之間的關系，類似于 jQuery 和 浏覽器内置 API 之間的關系。

4. 從哪裡下載下傳包

國外有一家 IT 公司，叫做 npm, Inc. 這家公司旗下有一個非常著名的網站： https://www.npmjs.com/ ，它是全球最大的包共享平台，你可以從這個網站上搜尋到任何你需要的包，隻要你有足夠的耐心！

到目前位置，全球約 1100 多萬的開發人員，通過這個包共享平台，開發并共享了超過 120 多萬個包 供我們使用。

npm, Inc. 公司提供了一個位址為 https://registry.npmjs.org/ 的伺服器，來對外共享所有的包，我們可以從這個伺服器上下載下傳自己所需要的包。

注意：

• 從 https://www.npmjs.com/ 網站上搜尋自己所需要的包;
• 從 https://registry.npmjs.org/ 伺服器上下載下傳自己需要的包

5. 如何下載下傳包

npm, Inc. 公司提供了一個包管理工具，我們可以使用這個包管理工具，從 https://registry.npmjs.org/ 伺服器把需要的包下載下傳到本地使用。

這個包管理工具的名字叫做 Node Package Manager（簡稱 npm 包管理工具），這個包管理工具随着 Node.js 的安裝包一起被安裝到了使用者的電腦上。

大家可以在終端中執行 npm -v 指令，來檢視自己電腦上所安裝的 npm 包管理工具的版本号。

2. npm 初體驗

1. 在項目中安裝包的指令

如果想在項目中安裝指定名稱的包，需要運作如下的指令：

npm install 包的完整名

//可簡寫為
npm i 包的完整名
           

2. 初次裝包後多了哪些檔案

初次裝包完成後，在項目檔案夾下多一個叫做 node_modules 的檔案夾和 package-lock.json 的配置檔案。

其中：

node_modules 檔案夾用來存放所有已安裝到項目中的包。require() 導入第三方包時，就是從這個目錄中查找并加載包。

package-lock.json 配置檔案用來記錄 node_modules 目錄下的每一個包的下載下傳資訊，例如包的名字、版本号、下載下傳位址等。

注意：程式員不要手動修改 node_modules 或 package-lock.json 檔案中的任何代碼，npm 包管理工具會自動維護它們。

3. 安裝指定版本的包

預設情況下，使用 npm install 指令安裝包的時候，會自動安裝最新版本的包。如果需要安裝指定版本的包，可以在包名之後，通過 @ 符号指定具體的版本，例如：

npm i [email protected]
           

4. 包的語義化版本規範

包的版本号是以“點分十進制”形式進行定義的，總共有三位數字，例如 2.24.0

其中每一位數字所代表的的含義如下：

第1位數字：大版本

第2位數字：功能版本

第3位數字：Bug修複版本

版本号提升的規則:隻要前面的版本号增長了，則後面的版本号歸零。

3. 包管理配置檔案

npm 規定，在項目根目錄中，必須提供一個叫做 package.json 的包管理配置檔案。用來記錄與項目有關的一些配置資訊。例如：

• 項目的名稱、版本号、描述等;
• 項目中都用到了哪些包;
• 哪些包隻在開發期間會用到;
• 那些包在開發和部署時都需要用到

1. 多人協作的問題

遇到的問題：第三方包的體積過大，不友善團隊成員之間共享項目源代碼。

解決方案：共享時剔除node_modules

2. 如何記錄項目中安裝了哪些包

在項目根目錄中，建立一個叫做 package.json 的配置檔案，即可用來記錄項目中安裝了哪些包。進而友善剔除 node_modules 目錄之後，在團隊成員之間共享項目的源代碼。

注意：今後在項目開發中，一定要把 node_modules 檔案夾，添加到 .gitignore 忽略檔案中。

3. 快速建立 package.json

npm 包管理工具提供了一個快捷指令，可以在執行指令時所處的目錄中，快速建立 package.json 這個包管理配置檔案：

// 作用：在執行指令所處的目錄中，快速建立 package.json 檔案
// 一個項目開始應先執行下面的指令
npm init -y
           

注意：

①上述指令隻能在英文的目錄下成功運作！是以，項目檔案夾的名稱一定要使用英文命名，不要使用中文，不能出現空格。

②運作 npm install 指令安裝包的時候，npm 包管理工具會自動把包的名稱和版本号，記錄到 package.json 中。

4. dependencies 節點

package.json 檔案中，有一個 dependencies 節點，專門用來記錄您使用 npm install 指令安裝了哪些包。

5. 一次性安裝所有的包

當我們拿到一個剔除了 node_modules 的項目之後，需要先把所有的包下載下傳到項目中，才能将項目運作起來。

否則會報類似于下面的錯誤：

// 由于項目運作依賴于 moment 這個包，如果沒有提前安裝好這個報，就會報如下錯誤：
Error:Cannot find module 'moment';
           

可以運作 npm install 指令（或 npm i）一次性安裝所有的依賴包：

// 執行 npm install 指令時，npm 包管理工具會先讀取 package.json 中的 dependencies 節點
// 讀取到記錄的所有依賴包名稱和版本号之後，npm 包管理工具會把這些包一次性下載下傳到項目中。
npm install 
           

6. 解除安裝包

可以運作 npm uninstall 指令，來解除安裝指定的包：

npm uninstall moment
           

注意：npm uninstall 指令執行成功後，會把解除安裝的包，自動從 package.json 的 dependencies 中移除掉。

7. devDependencies 節點

如果某些包隻在項目開發階段會用到，在項目上線之後不會用到，則建議把這些包記錄到 devDependencies 節點中。

與之對應的，如果某些包在開發和項目上線之後都需要用到，則建議把這些包記錄到 dependencies 節點中。

您可以使用如下的指令，将包記錄到 devDependencies 節點中：

// 安裝指定的包，冰激淩到 devDependencies 節點中：
npm i 包名 -D  ||  npm i -D 包名
// 注意：上述指令是簡寫形式，等價于下面完整的寫法：
npm install 包名 --save-dev
           

4. 解決下包速度慢的問題

1. 為什麼下包速度慢

在使用 npm 下包的時候，預設從國外的 https://registry.npmjs.org/ 伺服器進行下載下傳，此時，網絡資料的傳輸需要經過漫長的海底光纜，是以下包速度會很慢。

2. 淘寶 NPM 鏡像伺服器

淘寶在國内搭建了一個伺服器，專門把國外官方伺服器上的包同步到國内的伺服器，然後在國内提供下包的服務。進而極大的提高了下包的速度。

擴充：

鏡像（Mirroring）是一種檔案存儲形式，一個磁盤上的資料在另一個磁盤上存在一個完全相同的副本即為鏡像。

3. 切換 npm 的下包鏡像源

下包的鏡像源，指的就是下包的伺服器位址。

// 檢視目前的下包鏡像源
npm config get registry
// 将下包的鏡像源切換為淘寶鏡像源
npm config set registry=https://registry.npm.taobao.org/
// 檢查鏡像源是否下載下傳成功
npm config get registry
           

4. nrm

為了更友善的切換下包的鏡像源，我們可以安裝 nrm 這個小工具，利用 nrm 提供的終端指令，可以快速檢視和切換下包的鏡像源。

// 通過 npm 包管理器，将 nrm 安裝為全局可用的工具
npm i nrm -g
// 檢視所有可用的鏡像源
nrm ls
// 将下包的鏡像切換為 taobao 鏡像
nrm use taobao
           

5. 包的分類

使用 npm 包管理工具下載下傳的包，共分為兩大類，分别是：

• 項目包
• 全局包

1. 項目包

那些被安裝到項目的 node_modules 目錄中的包，都是項目包。

項目包又分為兩類，分别是：

• 開發依賴包（被記錄到 devDependencies 節點中的包，隻在開發期間會用到;
• 核心依賴包（被記錄到 dependencies 節點中的包，在開發期間和項目上線之後都會用到）

npm i 包名 -D // 開發依賴包(會被記錄到 devDependencies 節點中)
npm i 包名    // 核心依賴包(會被記錄到 dependencies 節點中 )
           

2. 全局包

在執行 npm install 指令時，如果提供了 -g 參數，則會把包安裝為全局包。

全局包會被安裝到 C:\Users\使用者目錄\AppData\Roaming\npm\node_modules 目錄下。

npm i 包名 -g           // 全局安裝指定的包
npm uninstall b包名 -g  // 解除安裝全局安裝的包
           

注意：

①隻有工具性質的包，才有全局安裝的必要性。因為它們提供了好用的終端指令。

②判斷某個包是否需要全局安裝後才能使用，可以參考官方提供的使用說明即可。

3. i5ting_toc

i5ting_toc 是一個可以把 md 文檔轉為 html 頁面的小工具，使用步驟如下：

// 将 i5ting_toc 安裝為全局包
npm install -g i5ting_toc
// 調用 i5ting_toc,輕松實作 md 轉 html 的功能
i5ting_toc -f 要轉換的md檔案路徑 -o
           

6. 規範的包結構

在清楚了包的概念、以及如何下載下傳和使用包之後，接下來，我們深入了解一下包的内部結構。

一個規範的包，它的組成結構，必須符合以下 3 點要求：

①包必須以單獨的目錄而存在

②包的頂級目錄下要必須包含 package.json 這個包管理配置檔案

③package.json 中必須包含 name，version，main 這三個屬性，分别代表包的名字、版本号、包的入口。

注意：以上 3 點要求是一個規範的包結構必須遵守的格式，關于更多的限制，可以參考如下網址：

https://yarnpkg.com/zh-Hans/docs/package-json

7. 案例( 開發屬于自己的包)

1. 需要實作的功能

①格式化日期

② 轉義 HTML 中的特殊字元

③ 還原 HTML 中的特殊字元

2. 初始化包的基本結構

①建立 dxx-tools 檔案夾，作為包的根目錄

②在 dxx-tools 檔案夾中，建立如下三個檔案：

• package.json （包管理配置檔案）
• index.js （包的入口檔案）
• README.md （包的說明文檔）

3. 初始化 package.json

{
    "name": "dxx-tools",
    "version": "1.0.0",
    "main": "index.js",
    "description": "提供了格式化時間，HTMLEscape的功能",
    "keywords": ["dxx", "dateFormat", "escape"],
    "license": "ISC"
}
           

關于更多 license 許可協定相關的内容，可參考 https://www.jianshu.com/p/86251523e898

4. 在 index.js 中定義格式化時間的方法

// 這是包的入口檔案

// 定義補零函數
function padZero(n) {
    return n > 9 ? n : '0' + n;
}

// 定義時間函數
function dateFormat(dateStr) {
    const dt = new Date(dateStr);

    const y = dt.getFullYear();
    const m = padZero(dt.getMonth() + 1);
    const d = padZero(dt.getDate());

    const hh = padZero(dt.getHours());
    const mm = padZero(dt.getMinutes());
    const ss = padZero(dt.getSeconds());

    return `${y}-${m}-${d}  ${hh}:${mm}:${ss}`;
};

module.exports = {
    dateFormat
};
           

5. 在 index.js 中定義轉義 HTML 的方法

function htmlEscape(htmlStr){
    return htmlStr.replace(/<|>|"|&/g,(match)=>{
        switch(match){
            case '<':
                return '&lt';
            case '>':
                return '&gt';
            case '"':
                return '&quot';
            case '&':
                return '&amp';
        };
    })
};
           

6. 在 index.js 中定義還原 HTML 的方法

function htmlUnEscape(str) {
    return str.replace(/<|&gt|"|&/g, (match) => {
        switch (match) {
            case '<':
                return '<';
            case '&gt;':
                return '>';
            case '&quot;':
                return '"';
            case '&amp;':
                return '&';
        };
    })
};
           

7. 将不同的功能進行子產品化拆分

①将格式化時間的功能，拆分到 src -> dateFormat.js 中

②将處理 HTML 字元串的功能，拆分到 src -> htmlEscape.js 中

③在 index.js 中，導入兩個子產品，得到需要向外共享的方法

④在 index.js 中，使用 module.exports 把對應的方法共享出去

8. 編寫包的說明文檔

包根目錄中的 README.md 檔案，是包的使用說明文檔。通過它，我們可以事先把包的使用說明，以 markdown 的格式寫出來，友善使用者參考。

README 檔案中具體寫什麼内容，沒有強制性的要求；隻要能夠清晰地把包的作用、用法、注意事項等描述清楚即可。

我們所建立的這個包的 README.md 文檔中，會包含以下 6 項内容：

安裝方式、導入方式、格式化時間、轉義 HTML 中的特殊字元、還原 HTML 中的特殊字元、開源協定

8. 釋出包

1. 注冊 npm 賬号

①通路 https://www.npmjs.com/ 網站，點選 sign up 按鈕，進入注冊使用者界面

②填寫賬号相關的資訊：Full Name、Public Email、Username、Password

③點選 Create an Account 按鈕，新增賬號

④登入郵箱，點選驗證連結，進行賬号的驗證

2. 登入 npm 賬号

npm 賬号注冊完成後，可以在終端中執行 npm login 指令，依次輸入使用者名、密碼、郵箱後，即可登入成功。

**注意：**在運作 npm login 指令之前，必須先把下包的伺服器位址切換為 npm 的官方伺服器。否則會導緻釋出包失敗！

3. 把包釋出到 npm 上

将終端切換到包的根目錄之後，運作 npm publish 指令，即可将包釋出到 npm 上（注意：包名不能雷同）。

4. 删除已釋出的包

運作 npm unpublish 包名 --force 指令，即可從 npm 删除已釋出的包。

注意：

①npm unpublish 指令隻能删除 72 小時以内釋出的包

②npm unpublish 删除的包，在 24 小時内不允許重複釋出

③釋出包的時候要慎重，盡量不要往 npm 上釋出沒有意義的包！