前端工具及插件庫(kù)
專欄收錄該內(nèi)容
24 篇文章1 訂閱
訂閱專欄
npm
一、安裝配置
二、初始化配置文件
package.json
package.lock.json
二、下載模塊
2.1、下載指令
2.2、清理緩存
2.3、模塊信息
2.4、npm i 與 npm ci 區(qū)別
三、其他指令
第三方模塊是別人寫好的一些文件，我們要使用這些文件，就需要下載。
node 提供了一個(gè)工具，叫做 npm，專門用來(lái)管理這些模塊。
npm 除了可以管理第三方模塊，還可以管理一些框架、插件和庫(kù)。
所以 npm 叫做包管理器，我們將模塊、插件、庫(kù)統(tǒng)稱為包。

一、安裝配置
安裝 node.js 之后自帶 npm，無(wú)需單獨(dú)安裝
測(cè)試工具：在命令行輸入 npm -v 能有個(gè)版本號(hào)，就說(shuō)明工具能用

如果要更新npm，可以使用如下命令
npm install npm -g

有些公司有自己內(nèi)部的鏡像源，在配置鏡像源這塊可以先看看公司有沒有指定，一般情況下使用的是淘寶鏡像源。

查詢當(dāng)前鏡像：
npm get registry?

設(shè)置為淘寶鏡像（推薦）
npm config set registry http://registry.npm.taobao.org/

設(shè)置回默認(rèn)的官方鏡像
npm config set registry https://registry.npmjs.org/

二、初始化配置文件
通常一個(gè)項(xiàng)目中會(huì)使用到很多的包、庫(kù)、模塊、插件等等，這樣使得node_modules這個(gè)文件夾會(huì)很大，如果要上線了或者要放到別的地方運(yùn)行，直接將這個(gè)文件夾復(fù)制的話，會(huì)很大不方便。
解決這個(gè)問題，可以使package.json。在這個(gè)文件中可以將項(xiàng)目依賴的包的信息，寫進(jìn)去，以后別人拿到這個(gè)文件就能知道，這個(gè)項(xiàng)目下載了哪些依賴的包。
簡(jiǎn)單的來(lái)說(shuō)就是，上傳項(xiàng)目時(shí)，不要把node_modules上傳上去，而是根據(jù)上傳的package.json重新下載一遍所需要的包
package.json：用來(lái)存儲(chǔ)你下載的模塊信息
package.json
創(chuàng)建package.json文件
# 需要根據(jù)提示手動(dòng)輸入項(xiàng)目的信息
npm init

# 使用默認(rèn)值創(chuàng)建，不用根據(jù)提示手動(dòng)輸入項(xiàng)目的信息，但是當(dāng)前文件夾名不能是中文
npm init -y
?
?
然后我們可以將所需要的模塊和依賴都被寫入package.json文件中的dependencies對(duì)象，配置安裝所有的依賴包
比如你要安裝react插件，直接寫在里面就行
前面是模塊名，后面是版本號(hào)，按對(duì)象格式書寫
最后一鍵安裝所有依賴：npm install，簡(jiǎn)寫就是：npm i

package.lock.json
我們?cè)诎惭b包時(shí)，可以看到它的版本依賴，默認(rèn)是兼容大版本即可。
此時(shí)會(huì)出現(xiàn)一個(gè)問題，就是在不同的用戶電腦中，初始化的包的版本可能會(huì)出現(xiàn)不一樣的情況，從而造成未可知的bug。
為了解決這個(gè)問題（這也是yarn誕生的一個(gè)原因），npm在5.0之后引入了package.lock.json文件，用來(lái)固定包的版本、包的源地址等信息，保證在不同的用戶開發(fā)環(huán)境中加載的是相同的包。
當(dāng)用戶使用npm install命令來(lái)安裝我們的依賴項(xiàng)時(shí)，會(huì)從package.lock.json文件中進(jìn)行安裝。
二、下載模塊
下載包時(shí)，會(huì)自動(dòng)創(chuàng)建node_modules和package.json文件，但是我們也可以先創(chuàng)建和配置好所要下載的包，然后別人拿到這個(gè)文件，只需要執(zhí)行npm i命令，就可以將項(xiàng)目依賴的包，都一鍵下載下來(lái)

{
? "name": "03-npm", ?//描述了包的名字，不能有中文
? "version": "1.0.0", ?//描述了包的的版本信息， x.y.z ?如果只是修復(fù)bug，需要更新Z位。如果是新增了功能，但是向下兼容，需要更新Y位。如果有大變動(dòng)，向下不兼容，需要更新X位。
? "description": "", //包的描述信息
? "main": "index.js", //入口文件（模塊化加載規(guī)則的時(shí)候詳細(xì)的講）
? "scripts": { ?//配置一些腳本，在vue的時(shí)候會(huì)用到，現(xiàn)在體會(huì)不到
? ? "test": "echo \"Error: no test specified\" && exit 1"
? },
? "keywords": [], ?//關(guān)鍵字（方便搜索）
? "author": "", ?//作者的信息
? "license": "ISC", ?//許可證，開源協(xié)議
? "dependencies": { ? //重要，項(xiàng)目的依賴， 方便代碼的共享 ?通過 npm install可以直接安裝所有的依賴項(xiàng)
? ? "bootstrap": "^3.3.7",
? ? "jquery": "^3.3.1"
? }
}

2.1、下載指令
本地安裝：將安裝包放在 ./node_modules 下
# 只能在當(dāng)前文件夾使用
npm install 模塊名稱
# 簡(jiǎn)寫：
npm i 模塊名稱
# 示例：
npm install antd

全局安裝：將安裝包放在 /usr/local 下或者你 node 的安裝目錄
# 可以在任意文件夾使用
npm install --global 模塊名稱
# 簡(jiǎn)寫：
npm i -g 模塊名稱
# 示例：
npm install --global antd

下載指定版本：(npm 默認(rèn)下載的是最新版本)
# 下載指定的版本
npm i 模塊名稱@版本
# 示例：
npm install bootstrap@3.3.7

下載多個(gè)包
# 可以同時(shí)下載多個(gè)包，多個(gè)包名中間用空格隔開
npm i ?bootstrap jquery
1
2
指定源安裝包
# 安裝所有包
npm install --registry=https://registry.npm.taobao.org

# 安裝單個(gè)包
npm install -g cnpm --registry=https://registry.npm.taobao.org

2.2、清理緩存
有的時(shí)候，有些包下載到一半，因?yàn)楦鞣N原因失敗了（比如突然沒有網(wǎng)了）
那么這個(gè)下載了一半的包 有可能 會(huì)被緩存下來(lái)
那么以后你再次下載的時(shí)候，就都是失敗的狀態(tài)
那么我們就要清除掉緩存以后，在重新下載
或者在執(zhí)行完命令再刪除緩存文件夾
# 清理緩存
npm cache verify
# 強(qiáng)制清理（簡(jiǎn)寫：npm cache clean -f）
npm cache clean --force

2.3、模塊信息
將安裝包信息保持到項(xiàng)目的 package.json 文件，很重要，最好每個(gè)項(xiàng)目所需的模塊都加上這個(gè)指令，一般用的是 -S

--save或-S：生產(chǎn)階段的依賴
將加入安裝包信息到package.json文件dependencies對(duì)象中
npm install gulp --save?
或?
npm install gulp -S
?
--save-dev或-D ：開發(fā)階段的依賴
將加入安裝包信息到package.json文件devDependencies對(duì)象中
npm install gulp --save-dev?
或?
npm install gulp -D
?
--save-optional或-O ：可選階段的依賴
將加入安裝包信息到package.json文件optionalDependencies對(duì)象中
npm install gulp --save-optional?
或?
npm install gulp -O
?
?
2.4、npm i 與 npm ci 區(qū)別
npm i

npm i 將安裝所有 package.json 中的依賴。
如果使用^或 ~ 標(biāo)識(shí)依賴的版本，npm i 將精準(zhǔn)安裝所標(biāo)識(shí)的版本。
npm i 會(huì)更新 package-lock.json 文件。
適用場(chǎng)景：安裝新依賴或者升級(jí)已有依賴。

npm ci

npm ci 會(huì)先刪除 node_modules 文件夾以確保干凈的環(huán)境。
npm ci 會(huì)依照 package-lock.json 里的依賴版本精準(zhǔn)安裝。
npm ci 不會(huì)更改 package.json 或是 package-locks 文件，整個(gè)安裝過程是鎖死的
npm ci 強(qiáng)依賴于 package-lock.json，如果 package-lock.json 不存在，npm ci 將不會(huì)工作。
適用場(chǎng)景：

在 CI/CD 場(chǎng)景中使用 npm ci 更為合適，一方面，由于 npm ci 依賴于 package-lock.json，依賴版本確保一致，不會(huì)出現(xiàn)線上版本和開發(fā)版本不一致而引發(fā)的問題；
另一方面，首次安裝時(shí)，使用npm ci將比 npm i 更加迅速，原因是由于 package-lock.json 的存在，不需要做依賴的版本檢查以及梳理各依賴之間的關(guān)系。

三、其他指令
卸載模塊：npm uninstall 模塊名
如：npm uninstall jquery
更新模塊：npm update 模塊名
如：npm update jquery
檢查模塊：npm outdated
此命令會(huì)列出所有已經(jīng)過時(shí)的包
查看模塊：npm ls
查看所有安裝的模塊及依賴
啟動(dòng)模塊：npm start
停止模塊：npm stop
重啟模塊：npm restart
測(cè)試模塊：npm test
查看版本：npm version