目錄：

1 npm包管理工具

2 package配置文件

3 npm install原理

4 yarn、cnpm、npx

5 發(fā)布自己的開(kāi)發(fā)包

6 pnpm使用和原理

當(dāng)我們使用npm install xxxx 的時(shí)候會(huì)添加一個(gè)node_module和2個(gè)json文件：

? ? ?

package.json是配置信息文件，

? 這個(gè)配置文件會(huì)記錄著你項(xiàng)目的名稱(chēng)、版本號(hào)、項(xiàng)目描述等；

? 也會(huì)記錄著你項(xiàng)目所依賴(lài)的其他庫(kù)的信息和依賴(lài)庫(kù)的版本號(hào)；

這個(gè)文件我們一般不直接自己創(chuàng)建，一般是通過(guò)dos目錄輸入 npm init來(lái)手動(dòng)配置，還可以通過(guò) npm init -y 來(lái)快速生成默認(rèn)的配置信息文件。通過(guò)腳手架創(chuàng)建的項(xiàng)目也是自帶了package.json文件的。

package.json文件屬性main

是指向模塊的入口文件的，很多文件入口文件是index.js，在node執(zhí)行require('文件名稱(chēng)')不加inde.js也自動(dòng)會(huì)找到index.js。但是如果入口文件不叫index.js，那require('文件名稱(chēng)')就找不到入口文件了，于是，如果你這個(gè)模塊文件夾有package.json文件的話，可以配置main來(lái)指定模塊入口文件，以后其他地方使用require('文件名稱(chēng)')就不會(huì)出現(xiàn)找不到入口文件的情況了。

?比如dayjs的入口文件就不是index.js

package.json文件屬性script

可以用來(lái)簡(jiǎn)化執(zhí)行命令的，比如本來(lái)需要執(zhí)行命令node xxx.js? ，通過(guò)使用script事先寫(xiě)好的命令，我們就可以直接寫(xiě)成npm run? xxx 就可以簡(jiǎn)化了。

package.json文件屬性dependencies:

dependencies是用來(lái)記錄開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境都需要使用的模塊的

當(dāng)項(xiàng)目要發(fā)送給別人使用的時(shí)候，一般會(huì)把項(xiàng)目的node_modules文件夾刪除掉來(lái)減小項(xiàng)目的內(nèi)存大小。但是項(xiàng)目又依賴(lài)這些模塊，別人只需要通過(guò)命令? npm install? 自動(dòng)下載這些依賴(lài)的模塊就好了。

如果是開(kāi)發(fā)時(shí)候才需要用到的模塊，我們安裝的時(shí)候是通過(guò)npm install xxx? --save-dev?? 或者?npm install xxx? -D ? 來(lái)存放到devDependencies里的。

命令npm install xxx? --save和npm install xxx? 是會(huì)記錄到dependencies里的

package.json文件屬性devDependencies屬性:

devDependencies和dependencies的企業(yè)別就是dependencies是用來(lái)記錄開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境都需要使用的模塊的；而devDependencies主要是用來(lái)記錄開(kāi)發(fā)環(huán)境下需要的模塊的。

比如下圖的vue和dayjs就會(huì)放到dependencies里，webpack和babel等就是放到devDependencies里。

如果是開(kāi)發(fā)時(shí)候才需要用到的模塊，我們安裝的時(shí)候是通過(guò)npm install xxx? --save-dev? 或者?npm install xxx? -D 來(lái)存放到devDependencies里的。

命令npm install xxx? --save和npm install xxx? 是會(huì)記錄到dependencies里的

?

package.json文件屬性peerDependencies屬性屬性:

有些模塊必須需要其他模塊作為前提才能使用，這個(gè)時(shí)候在那個(gè)模塊的packag.json文件里面的peerDependencies會(huì)有標(biāo)注。比如element-plus使用的前提就是需要有vue。

依賴(lài)的版本管理：

?????

關(guān)于npm install 命令細(xì)節(jié)：

項(xiàng)目（局部）安裝（local install）是進(jìn)入到項(xiàng)目或者文件夾內(nèi)時(shí)使用npm install xxx 來(lái)安裝的。

全局安裝（global install）是會(huì)把安裝的內(nèi)容放到一個(gè)由node管理的目錄，這個(gè)目錄有在電腦的環(huán)境變量里面，同時(shí)會(huì)在電腦的環(huán)境變量里面有這樣的命令可以執(zhí)行。比如安裝webpack可以通過(guò)npm install webpack -g 。此后可以在電腦的任何文件夾內(nèi)使用：

webpack xxx.js? 的命令。

注意：不是所有包都需要全局安裝，一般都是工具包才需要全局安裝（yarn、webpack等）。

基本知識(shí)看后面ppt內(nèi)容

項(xiàng)目在開(kāi)發(fā)的時(shí)候，安裝包的時(shí)候，命令要使用正確：

首先是npm 下載重復(fù)的包的時(shí)候，會(huì)查看之前是否有緩存該包。?

package.json里面記錄的都是比較寬松的版本。比如，在項(xiàng)目使用的包在自己手里可能是0.25.3的版本，但是項(xiàng)目給其他人的時(shí)候，通過(guò)npm install 安裝依賴(lài)之后可能會(huì)是2.25.3的版本。這個(gè)時(shí)候就可能出現(xiàn)不能正常使用某些功能了。所以，我們需要使用package-lock.json文件來(lái)確定死每一個(gè)包版本。這些包我們一般不手動(dòng)管理，全靠他們自動(dòng)化生成。

下圖是npm install xxx 的工作流程：

npm其他命令：

想要使用yard就從npm下載：

npm install yard -g

下載包使用npm的時(shí)候我們可以設(shè)置默認(rèn)鏈接淘寶鏡像源來(lái)下載包，有個(gè)缺點(diǎn)就npm以后默認(rèn)去淘寶鏡像源去下載包了，然后我們可以在下載一個(gè)cnpm（npm的鏡像），然后修改cnpm下載包的路徑為淘寶鏡像源就好了。

?

npx的目的的早期為了局部使用node_modules里面的webpack的，如果不使用npx的話用于打包項(xiàng)目的webpack會(huì)從電腦環(huán)境變量里面獲取。（存在的問(wèn)題是局部的webpack可能和全局的webpack版本可能不一樣）

在npm發(fā)布自己的包：

把你的項(xiàng)目發(fā)送到npm的包管理庫(kù)里面的方法是

（1）在npm官網(wǎng)先注冊(cè)一個(gè)賬號(hào)

（2）在你的項(xiàng)目根目錄的dos命令提示符登錄npm賬號(hào)

npm login

（3）在項(xiàng)目根目錄創(chuàng)建package.json文件

npm init -y

（4）發(fā)送項(xiàng)目文件

npm publish

最好是有一個(gè)index來(lái)統(tǒng)一導(dǎo)出某些功能，package.json也是比較重要。

如何正常使用下載好的包？（指的是使用node xxx.js命令直接執(zhí)行某個(gè)js文件的問(wèn)題）（這種情況是在原生的文件里面想要使用，不是在vue和react腳手架創(chuàng)建的項(xiàng)目里面使用）

報(bào)錯(cuò)問(wèn)題：

上面步驟我們上傳的包在其他js文件里面需要使用的時(shí)候，通過(guò)以下兩種方式會(huì)報(bào)錯(cuò)：

導(dǎo)出的文件是es6的模塊化

?導(dǎo)入的方式是commonjs，然后想要使用node main.js （報(bào)錯(cuò)）

?想要使用es6來(lái)導(dǎo)入，然后繼續(xù)執(zhí)行node main.js時(shí)報(bào)錯(cuò)

解決辦法：

（1）可以通過(guò)瀏覽器加載

（2）使用webpack來(lái)加載

在項(xiàng)目根目錄npm下載webpack

npm install webpack webpack-cli -D

然后在項(xiàng)目根目錄執(zhí)行npx webpack 打包出一個(gè)dist的文件夾

npx webpack

最后一步是創(chuàng)建一個(gè)一個(gè)html文件，使用script標(biāo)簽把dist目錄下的main.js文件導(dǎo)入，點(diǎn)擊打開(kāi)html文件就能正常使用了。

如何更新上傳的項(xiàng)目的版本？

在package.js文件中更改版本號(hào)，然后再登錄npm，通過(guò)npm publish來(lái)上傳就好了，

pnpm為我們解決了處理以往創(chuàng)建的很多的項(xiàng)目（節(jié)省磁盤(pán)）。

硬連接和軟連接：

硬連接可以實(shí)現(xiàn)多個(gè)文件對(duì)應(yīng)的數(shù)據(jù)是同一個(gè)文件，被指向的那個(gè)文件修改之后，指向這個(gè)文件的所有文件都會(huì)改變。就像編程里面的對(duì)象類(lèi)型。

軟連接可以連接為快捷方式，這個(gè)只是知道原本文件的位置去打開(kāi)那個(gè)文件，一旦那個(gè)文件改變名稱(chēng)或者移動(dòng)刪除就打不開(kāi)了。

pnpm實(shí)現(xiàn)的是多個(gè)項(xiàng)目如果下載的同一個(gè)包在磁盤(pán)里面存在，則直接建立硬連接，就不再下載一個(gè)在磁盤(pán)中了，所以節(jié)省磁盤(pán)。而其他的包管理器則相反，每個(gè)項(xiàng)目下載相同的包的時(shí)候就會(huì)再次下載包，磁盤(pán)中會(huì)有重復(fù)的包。

?

?

pnpm下載的包都是非扁平化的。

其他的包管理器下載一個(gè)包的時(shí)候可能會(huì)下載多個(gè)依賴(lài)包，并且這些依賴(lài)包只會(huì)放在下載的那個(gè)包里面。當(dāng)我們確實(shí)需要某個(gè)包的時(shí)候，如果在上述的包刪除時(shí)，依賴(lài)包也會(huì)被刪除。

pnpm下載一個(gè)包的時(shí)候，依賴(lài)包也會(huì)放到node_modules文件夾里面，而不是放到那個(gè)包底下。

如何使用pnpm？

下載pnpm

npm install -g pnpm

pnpm也可以創(chuàng)建一個(gè)package.json文件

pnpm init

安裝一個(gè)包

?

下載后的包存放在哪里了？

下圖的axios包的又邊有個(gè)右箭頭（這個(gè)文件是軟連接的，相當(dāng)于快捷鍵指向真實(shí)文件）

?

真正的axios包放在了.pnpm文件里面的axios\node_modules里面了

?

?

?

?

1

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-462186.html

到了這里，關(guān)于包管理工具詳解npm、yarn、cnpm、npx、pnpm的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！