一文詳解Node.js中的npm與包【萬字教學】

2022-11-15 22:01:07
本篇文章帶大家瞭解一下中的npm與包,萬字教學~超超超詳細

node.js極速入門課程:進入學習


什麼是包

Node.js中的第三方模組又叫做包,指的是同一種東西,知識叫法不同

包的來源

不同於Node.js的內建模組與自定義模組,包是由第三方個人或團隊開發出來的,免費供所有人使用。【相關教學推薦:】

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

為什麼需要包

由於Node.js的內建模組僅提供了一些底層的api,導致在基於內建模組進行專案開發的時候,效率很低,包是基於內建模組封裝出來的,提供了更高階,更方便的api。極大地提高了開發效率。包和內建模組之間的關係,類似於jquery和瀏覽器內建api之間的關係。

從哪裡下載

國外有一家IT公司,叫做npm,lnc。這家公司旗下有一個非常著名的網站,全球最大的包共用平臺

你可以從這個網站上搜尋到任何你需要的包,只要你有足夠的耐心!

到目前為止,全球約有1100萬左右的開發人員,通過這個包共用平臺,開發並共用了超過120多萬個包供我們使用。

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

如何下載包

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

這個包管理工具的名字叫做Node Package Manager (簡稱npm),這個包管理工具隨著Node.js的安裝包一起被安裝到了使用者的電腦上,

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

npm初體驗


格式化時間的傳統做法

實現步驟

  • 建立格式化事件的自定義模組

  • 自定格式化時間的方法

  • 建立補零函數

  • 從自定義模組中匯出格式化時間的函數

  • 匯入格式化時間的自定義模組

  • 呼叫格式化時間的函數

實現程式碼

自定義時間格式化模組

//定義格式化時間的方法
function dataFormat(data) {
    //接受字串建立物件
    const dt = new Date(data);
    //年
    const Y = dt.getFullYear();
    //月
    const m = format(dt.getMonth() + 1);
    //日
    const d = format(dt.getDay());
    //時
    const hh = format(dt.getHours());
    //分
    const mm = format(dt.getMinutes());
    //秒
    const ss = format(dt.getSeconds());
    return `${Y}-${m}-${d} ${hh}:${mm}:${ss}`;
 
}
//補零操作
function format(data) {
    return data > 9 ? data : '0' + data;
}
//暴露物件
module.exports = { dataFormat };
登入後複製

大家注意曝光這裡要用module.exports,因為這裡參照了新的物件,或者修改參照物件新增屬性,可以使用exports。

exports.dataFormat = dataFormat;
登入後複製

使用模組

//匯入模組
const data = require('./自定義模組/格式化時間模組.js');
//建立未格式化物件
let olddata = new Date();
console.log(olddata);
//呼叫格式化模組
let newdata = data.dataFormat(olddata)
console.log(newdata);
登入後複製

利用包格式化時間

步驟

  • 使用npm包管理工具,在專案中安裝格式化時間的包 moment

  • 使用require()匯入包

  • 參考moment的官方api檔案學習瞭解使用方法

安裝包

在當前終端中輸入

npm install moment
登入後複製
  • npm 包管理工具

  • install 安裝 可簡寫成 i

  • moment 包名稱

下載包之後 可以在上面提到的網站內搜尋moment 檢視api檔案學習使用方法,網站是英文的,也可以在csdn內進行搜尋一般也可以找到教學文章。

實現程式碼

//匯入包
const moment = require('moment');
//格式化事件
//單詞要大寫
const newdate = moment().format('YYYY-MM-DD HH:MM:SS');
console.log(newdate);
登入後複製

安裝包後的相關檔案

初次安裝包完成後,在專案資料夾下會多三個檔案,一個叫做node_modules的資料夾和package-lock.json的組態檔另一個是package.json。

其中

node_modules資料夾用來存放所有已安裝到專案中的包,require()匯入第三方包時,就是從這個目錄中查詢並載入的包,

package-lock.json組態檔用來記錄node_modules目錄下的每一個包的下載資訊,例如包的名字資訊,版本號等。

注意:不需要修改兩個檔案中的任何東西,npm包會自動維護。

安裝指定版本的包

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

npm i moment @ 1.1.12
登入後複製

包的語意化版本規範

包的版本號是以‘點分十進位制’形式進行定義的,總共有三位數位,例如:2.24.0

期中沒一位數位所代表的含義如下

第一位數位:大版本

第二位數位:功能版本

第三位數位:bug修復版本

版本號提升的規則:只要前面的版本號增長了,則後面的版本號歸零。

npm與包


包管理組態檔

npm規定,在專案跟目錄中,必須提供一個叫做package.json的包管理組態檔,用來記錄與專案有關的一些設定資訊,例如:

  • 專案的名稱,版本號概述等
  • 專案中都用到了哪些包
  • 哪些包只在開發期間會用到
  • 哪些包在開發和部署時都需要用到

多人共同作業的問題

如何記錄專案中安裝了哪些包

在專案根目錄中,建立一個叫做package.json的組態檔,即可用來記錄專案中安裝了哪些包,從而方便剔除node_modules目錄之後,在團隊成員之間共用程式碼。

注意:今後在專案開發中,一定要把node_modules資料夾,新增到gitignore忽略檔案中

快速建立package.json

npm包管理工具提供了一個快捷命令,可以在執行命令時所處的目錄中,快速建立package.json這個包管理組態檔,在我們安裝第三方包的時候 如果沒有package.json也會自動生成一個(裡面只有安裝的包的資訊)。

npm init -y
登入後複製

注意:上述命令只能在英文的目錄下成功執行,所以需要保證專案檔案所處的父級目錄要是英文名。

建議 建立資料夾後 就執行此命令先建立一個package.son。

安裝包的時候 會自動將相關資訊寫入package.json檔案中。

dependdencies節點

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

一次性安裝的所有的包

當我們拿到一個提出了node_modules的專案之後,啟動專案會報錯,提示沒有所需要的包,蘇一在啟動專案之前。我們應該安裝所有需要的包,package.jaon中記錄的包,然後才能執行起來。

npm  install
登入後複製

我們只需要執行這個命令,執行這個命令後,會讀取package.json中所有以來的包,並下載。

解除安裝包

npm uninstall  包名
登入後複製

這個是不能簡寫的,解除安裝之後 也會將包名從 package.json檔案中刪除,

devDependencies節點

如果某些包只在專案開發階段會用到,在專案上線之後不會用到,則建議把這些包記錄到devDependencies節點中,

如果某些包在開發和專案上線都需要用到,則建議把這些包記錄到dependencies節點中。

npm  install   包名 -D
登入後複製

只需要在結尾加個-D就可以將包安裝在devDependencies中

解決下包速度慢問題

為什麼下包速度慢

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

淘寶NPM映象伺服器

淘寶在國內搭建了一個伺服器,專門把國外伺服器的包同步到國內的伺服器,然後我們可以再從國內的伺服器上下載包,這樣就可以大大提高包的下載速度。

映象:是一種檔案儲存形式,一個磁碟上的資料在另一個磁碟上存在一個完全相同的副本即為映象。

切換npm的下包映象源

檢視當前下包的伺服器地址

npm config get registry
登入後複製

切換淘寶伺服器

npm config set registry=https://registry:npm:taobao.org/
登入後複製

nrm

為了更方便的切換下包的映象包,我們可以安裝nrm這個小工具,利用nrm提供的終端命令,可以快速檢視和切換下包的映象源。

npm i nrm -g
登入後複製

-g全域性下載,

檢視所有可用的映象源

nrm ls
登入後複製

nrm use taobao
登入後複製

包的分類

專案包

那些被安裝到專案的node_modules目錄中的包,都是專案包。

專案包分為兩類,分別是:

  • 開發依賴包(被記錄到devDependendes節點中的包,只在開發期間使用)
  • 核心依賴包(被記錄到dependencies節點中的包,在開發期間和專案上線之後都會用到)

全域性包

在執行npm install 命令時,如果提供-g引數,則會把包安裝為全域性包。

全域性包安裝包檢視位置命令

npm config ls
登入後複製

注意: 只有工具性質的包 才有全域性安裝的必要性。

i5ting_toc

作為程式設計師,md檔案的編寫往往是必要的,md檔案編寫簡易快捷,是不二的筆記語言。

這是一個可以把md檔案轉為html頁面的小工具,這種工具性質的包 就是有必要全卷裝的,便於我們日後使用。

安裝

npm i  i5ting_toc -g
登入後複製

使用

i5ting_toc -f 檔案路徑 -o
登入後複製

規範的包結構

在清楚了包的概念,以及如何下載和使用包之後,接下來我們深入瞭解一下包的內部結構

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

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

  • 包的頂級目錄下要必須包含package.json這個組態檔

  • package.json中必須包含name,version,main這三個屬性,分別代表包的名字,版本號,包的入口。

開發屬於自己的包

需要實現的功能

  • 格式化日期

  • 跳脫HTML中的特殊字元

  • 還原HTML中的特殊字元

初始化包的基本結構

1、新建itheima-tools資料夾,作為包的根目錄

2、在itheima-tools資料夾中,新建如下三個檔案

  • package.json 包管理組態檔
  • index.js 包入口檔案
  • README.md 包的說明檔案

初始化package.json

{
    "name": "itheima-tools-xiepu",
    "version": "1.0.0",
    "main": "index.js",
    "description": "提供了格式化時間。跳脫功能",
    "keywords": ["xiepu","tools","format"],
    "license": "ISC"
}
登入後複製
  • name 製作的npm包的名稱 之後匯入包 搜尋包 都是這個名字 這個名字不可重複 建議命名之前現在npm網站內搜尋一下是否重名
  • version 版本號
  • main 主檔案路徑 到我們使用匯入這個包的時候。就會自動執行這個js裡面的內容
  • description 這是對包的描述
  • keywords 包的關鍵字 在網站內搜尋時的關鍵字
  • license 遵循的開源許可協定

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

可以直接貼上我們之前寫的自定義包函數

//定義格式化時間的方法
function dataFormat(data) {
    //接受字串建立物件
    const dt = new Date(data);
    //年
    const Y = dt.getFullYear();
    //月
    const m = format(dt.getMonth() + 1);
    //日
    const d = format(dt.getDay());
    //時
    const hh = format(dt.getHours());
    //分
    const mm = format(dt.getMinutes());
    //秒
    const ss = format(dt.getSeconds());
    return `${Y}-${m}-${d} ${hh}:${mm}:${ss}`;

}
//補零操作
function format(data) {
    return data > 9 ? data : '0' + data;
}
//暴露物件
exports.dataFormat = dataFormat;
登入後複製

在index.js中定義跳脫html的方法

//定義跳脫字元函數
function htmlstr(hstr) {
    return hstr.replace(/<|>|"|&/g, data => {
        switch (data) {
            case '<':

                return '&lt;';

            case '>':
                return '&gt;';
            case '"':
                return '&quot;';
            case '&':
                return '&amp;';
        }
    })
}
//暴露物件
exports.htmlstr = htmlstr;
登入後複製

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

function htmlstr1(hstr) {
    return hstr.replace(/&lt;|&gt;|&quot;|&amp;/g, data => {
        switch (data) {
            case '&lt;':

                return '<';

            case '&gt;':
                return '>';
            case '&quot;':
                return '"';
            case '&amp;':
                return '&';
        }
    })
}
//暴露物件
exports.htmlstr1 = htmlstr1;
登入後複製

將不同的功能進行模組化拆分

  • 將格式化時間的功能,拆分到src dataFormat.js中

  • 將處理html字串的功能,拆分到src htmlstr.js中

  • 在index.js中,匯入兩個模組,得到需要向外共用的方法

  • 在index.js中,使用module.exports把對應的方法共用出去

將格式化時間,和字串跳脫各自分別放到獨立的js中(創立一個src資料夾),並進行暴露。

然後在主頁index.js中,進行匯入和曝光。

const htmlstr = require('./src/htmlstr');
const dataFormat = require('./src/dataFormat');



module.exports = {
    htmlstr,
    dataFormat
}
登入後複製

呼叫測試

const itheima = require('../itheima-tools');

console.log(itheima.dataFormat.dataFormat(new Date()));
const str = '<h1>232</h1>';
console.log(itheima.htmlstr.htmlstr(str));
console.log(itheima.htmlstr.htmlstr1(str));
登入後複製

詳細說一下這裡,我們首先呼叫的index.js這個模組,可以看到匯入只寫了資料夾沒寫index.js,這種寫法同樣也可以匯入index.js,它會去尋找package.json裡的main屬性,所以會匯入index.js,匯入index.js之後,我們又從index.js中匯入了另外兩個跳脫和格式化時間模組,所以在使用屬性時

是這樣一個過程 itheima這個模組裡的htmlstr模組裡的htmlstr屬性。

那麼可不可以不寫的那麼複雜?

答案是可以的 我們只要在itheima這個模組裡 直接曝光出所有屬性就好,這裡我們可以在itheima模組中使用es6的展開屬性...直接將相關內容曝光在物件內。

index.js

const htmlstr = require('./src/htmlstr');
const dataFormat = require('./src/dataFormat');



module.exports = {
    ...htmlstr,
    ...dataFormat
}
登入後複製

ceshi.js

const itheima = require('../itheima-tools');

console.log(itheima.dataFormat(new Date()));
const str = '<h1>232</h1>';
console.log(itheima.htmlstr(str));
console.log(itheima.htmlstr1(str));
登入後複製

編寫包的說明檔案

說明檔案內容沒有強制性要求,只要能清晰的包的作用,注意點寫好就可以,書寫內容大致有以下六點

  • 安裝方式

  • 匯入方式

  • 格式化時間

  • 跳脫html中的特殊字元

  • 還原html中的特殊字元

  • 開源協定

大家可以去學習一下markdown檔案編寫的語法 並不難

## 安裝
"
npm install itheima-tools-xiaoxie
"
## 匯入
"
const name = require ('itheima-tools-xiaoxie')
"
## 格式化時間
"
console.log(itheima.dataFormat(new Date()));

"
## 跳脫html字元
"
const str = '<h1>232</h1>';
這裡輸入內容
console.log(itheima.htmlstr(str));
"
## 還原html字元
"
const str = '<h1>232</h1>';
這裡輸入內容
console.log(itheima.htmlstr1(str));
"
"
檔案裡 有ceshi.js檔案 可以在裡面進行測試
"
## 開源協定
"
ISC
"
登入後複製

釋出包

註冊npm賬號

  • 登入npm網站,點選 sign up按鈕,進入註冊使用者介面

  • 填寫賬戶相關的資訊,Full Name , Public Email, Username, Password

  • 點選Create an Account按鈕,註冊賬號

在終端登入npm賬號

npm賬號註冊完成後,可以在終端中執行npm login命令,依次輸入使用者名稱,密碼,郵箱後,即可登入成功。

注意:在登入npm包,釋出包之前要將下載地址修改為npm官網地址,否則釋出包會失敗。

nrm use npm
登入後複製

登入

根據提示依次輸入賬號 密碼 郵箱 驗證碼

會顯示已登入 後面顯示網站名稱

可以看到 我們登入到了官網上面

把包釋出到npm上

將終端切換到 包的根目錄 執行npm publish命令,就可以將包發不到npm上(注意 包不可以重名)

釋出成功

開啟網站 將賬號登入 滑鼠移動到頭像 點選packages 就可以看到我們釋出的內容

刪除已釋出的包

執行 這個命令就可以將npm上面的包刪除掉

npm unpublish 包名--force
登入後複製

注意:通過此命令只可以刪除釋出72小時內的包

刪除的包 24小時內不可以重複釋出

更多node相關知識,請存取:!

以上就是一文詳解Node.js中的npm與包【萬字教學】的詳細內容,更多請關注TW511.COM其它相關文章!