npm怎么安裝與使用

這篇文章主要講解了“npm怎么安裝與使用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“npm怎么安裝與使用”吧！

一、由來(lái)

前端是怎么共享代碼的呢？

1、在 GitHub 還沒(méi)有興起的年代，前端是通過(guò)網(wǎng)址來(lái)共享代碼

比如你想使用 jQuery，那么你點(diǎn)擊 jQuery 網(wǎng)站上提供的鏈接就可以下載 jQuery，放到自己的網(wǎng)站上使用

2、GItHub 興起之后，社區(qū)中也有人使用 GitHub 的下載功能：

3、麻煩

當(dāng)一個(gè)網(wǎng)站依賴(lài)的代碼越來(lái)越多，程序員發(fā)現(xiàn)這是一件很麻煩的事情：

• 去 jQuery 官網(wǎng)下載 jQuery

• 去 BootStrap 官網(wǎng)下載 BootStrap

• 去 Underscore 官網(wǎng)下載 Underscore

• ……

有些程序員就受不鳥(niǎo)了，一個(gè)擁有三大美德的程序員 Isaac Z. Schlueter （以下簡(jiǎn)稱(chēng) Isaaz）給出一個(gè)解決方案：用一個(gè)工具把這些代碼集中到一起來(lái)管理吧！

這個(gè)工具就是他用 JavaScript （運(yùn)行在 Node.js 上）寫(xiě)的 npm，全稱(chēng)是 Node Package Manager

4、具體步驟

NPM 的思路大概是這樣的：

1. 買(mǎi)個(gè)服務(wù)器作為代碼倉(cāng)庫(kù)（registry），在里面放所有需要被共享的代碼

2. 發(fā)郵件通知 jQuery、Bootstrap、Underscore 作者使用 npm publish 把代碼提交到 registry 上，分別取名 jquery、bootstrap 和 underscore（注意大小寫(xiě)）

3. 社區(qū)里的其他人如果想使用這些代碼，就把 jquery、bootstrap 和 underscore 寫(xiě)到 package.json 里，然后運(yùn)行 npm install ，npm 就會(huì)幫他們下載代碼

4. 下載完的代碼出現(xiàn)在 node_modules 目錄里，可以隨意使用了。

這些可以被使用的代碼被叫做「包」（package），這就是 NPM 名字的由來(lái)：Node Package(包) Manager(管理器)。

5、發(fā)展

Isaaz 通知 jQuery 作者 John Resig，他會(huì)答應(yīng)嗎？這事兒不一定啊，對(duì)不對(duì)。

只有社區(qū)里的人都覺(jué)得 「npm 是個(gè)寶」的時(shí)候，John Resig 才會(huì)考慮使用 npm。

那么 npm 是怎么火的呢？

npm 的發(fā)展是跟 Node.js 的發(fā)展相輔相成的。

Node.js 是由一個(gè)在德國(guó)工作的美國(guó)程序員 Ryan Dahl 寫(xiě)的。他寫(xiě)了 Node.js，但是 Node.js 缺少一個(gè)包管理器，于是他和 npm 的作者一拍即合、抱團(tuán)取暖，最終 Node.js 內(nèi)置了 npm。

后來(lái)的事情大家都知道，Node.js 火了。

隨著 Node.js 的火爆，大家開(kāi)始用 npm 來(lái)共享 JS 代碼了，于是 jQuery 作者也將 jQuery 發(fā)布到 npm 了。

所以現(xiàn)在，你可以使用 npm install jquery 來(lái)下載 jQuery 代碼。

現(xiàn)在用 npm 來(lái)分享代碼已經(jīng)成了前端的標(biāo)配。

二、npm安裝

以安裝Vue項(xiàng)目為例，在使用之前，我們先來(lái)掌握3個(gè)東西是用來(lái)干什么的。

• npm: Nodejs下的包管理器。

• webpack: 它主要的用途是通過(guò)CommonJS的語(yǔ)法把所有瀏覽器端需要發(fā)布的靜態(tài)資源做相應(yīng)的準(zhǔn)備，比如資源的合并和打包。

• vue-cli: 用戶(hù)生成Vue工程模板。（幫你快速開(kāi)始一個(gè)vue的項(xiàng)目，也就是給你一套vue的結(jié)構(gòu)，包含基礎(chǔ)的依賴(lài)庫(kù)，只需要 npm install就可以安裝）

1、下載nodejs

windows下的NodeJS安裝是比較方便的（v0.6.0版本之后，支持windows native），只需要登陸官網(wǎng)（http://nodejs.org/），便可以看到首頁(yè)的“INSTALL”按鈕。

如圖，下載12.18.0 LTS （推薦給絕大部分用戶(hù)使用）直接點(diǎn)擊就會(huì)自動(dòng)下載了。

下載后雙擊安裝

可以使用默認(rèn)路徑。

注意，如下圖所示，在安裝node.js時(shí)，將一起自動(dòng)安裝npm包管理器，同時(shí)將兩者自動(dòng)添加到系統(tǒng)的環(huán)境變量。

一路點(diǎn)Next,最后點(diǎn)Finish完成

2、檢查安裝目錄，檢查文件系統(tǒng)是否正常。

是否在安裝目錄下存在node.exe、npm.cmd文件和node_modules目錄等。

3、打開(kāi)CMD，檢查是否正常

查看node.js和npm的環(huán)境變量是否增加

echo %Path%

通過(guò)命令查看node.js和隨著它一起安裝的npm模塊的版本號(hào)。

node –v
# v12.18.0

npm –v
# 6.14.4

4、查看npm的本地全局倉(cāng)庫(kù)

npm list -global

注意：npm的本地全局倉(cāng)庫(kù)在C系統(tǒng)盤(pán)的用戶(hù)目錄。即C:\Users\bobin.yang\AppData\Roaming\npm。

5、配置鏡像站

npm config set registry=http://registry.npm.taobao.org

6、 顯示所有配置信息

npm config list

我們關(guān)注一個(gè)用戶(hù)配置文件.npmrc，可以看到剛才的配置信息

7、檢查一下鏡像站行不行

命令1

npm config get registry

命令2

npm info vue # 看看能否獲得vue的信息

8、升級(jí)npm為最新版本

npm install ***為安裝或更新命令 加上-g這個(gè)參數(shù)的意思是裝到global目錄下即C:\Users\bobin.yang\AppData\Roaming\npm，否則為安裝到當(dāng)前目錄下。

單獨(dú)更新npm ：

npm install npm -g

再次查看npm的版本：

npm -v

再次查看global里的模塊，現(xiàn)在不為空了，已經(jīng)讀了NPM模塊了。

npm list -global

三、NPM 用法

1、包安裝方式

• “本地安裝” 指的是將一個(gè)模塊下載到當(dāng)前項(xiàng)目的 node_modules 子目錄，然后只有在項(xiàng)目目錄之中，才能調(diào)用這個(gè)模塊。 
  “本地安裝” 將安裝包放在 ./node_modules 下（運(yùn)行 npm 命令時(shí)所在的目錄），如果沒(méi)有 node_modules 目錄，會(huì)在當(dāng)前執(zhí)行 npm 命令的目錄下生成 node_modules 目錄。 
  可以通過(guò) require() 來(lái)引入本地安裝的包。

• “全局安裝”將安裝包放在 /usr/local 下或者C:\Users\用戶(hù)名\AppData\Roaming\npm\node_modules。 
  它可以直接在命令行里使用，這是使用全局安裝的主要原因。

本地模式和全局模式的特點(diǎn)如下：

• 本地模式 
  可通過(guò) require 使用:是 
  注冊(cè) PATH:否

• 全局模式 
  可通過(guò) require 使用:否 
  注冊(cè) PATH:是

2、常用命令

NPM提供了很多命令，例如install和publish，使用 npm help 可查看所有命令。

• npm install -g：安裝模塊

• npm uninstall ： 卸載模塊

• npm search ：搜索模塊

• npm list：以樹(shù)形結(jié)構(gòu)列出當(dāng)前項(xiàng)目安裝的所有模塊，以及它們依賴(lài)的模塊。

• npm update ：可以把當(dāng)前目錄下node_modules子目錄里邊的對(duì)應(yīng)模塊更新至最新版本。

• npm cache clear：可以清空NPM本地緩存，用于對(duì)付使用相同版本號(hào)發(fā)布新版本代碼的人。

• npm unpublish @：可以撤銷(xiāo)發(fā)布自己發(fā)布過(guò)的某個(gè)版本代碼。

• npm help：可查看所有命令。

• npm help ：可查看某條命令的詳細(xì)幫助，例如npm help install。

3、使用 package.json

當(dāng)你的項(xiàng)目需要依賴(lài)多個(gè)包時(shí)，推薦使用 package.json。其優(yōu)點(diǎn)為：

• 它以文檔的形式規(guī)定了項(xiàng)目所依賴(lài)的包

• 可以確定每個(gè)包所使用的版本

• 項(xiàng)目的構(gòu)建可以重復(fù)，在多人協(xié)作時(shí)更加方便

創(chuàng)建package.json文件

• 手動(dòng)創(chuàng)建

• 或者 通過(guò) npm init 命令生成遵守規(guī)范的 package.json文件

4、更改全局安裝目錄

使用npm config命令可以達(dá)到此目的。

npm config set prefix <目錄>

或者手動(dòng)在 ~/.npmrc文件中進(jìn)行配置：

prefix = /home/yourUsername/npm

更改目錄后記得在系統(tǒng)環(huán)境變量 PATH中添加該路徑：

export PATH=~/npm/bin:$PATH

5、安裝時(shí)保存到依賴(lài)項(xiàng)

npm install默認(rèn)將所有指定的軟件包保存到依賴(lài)項(xiàng)中。此外，您可以使用一些標(biāo)志來(lái)控制在何處以及如何保存它們：

• -P, --save-prod: 包將出現(xiàn)在您的依賴(lài)項(xiàng)中。除非存在-D或-O，否則這是默認(rèn)設(shè)置。

• -D, --save-dev: 包將出現(xiàn)在您的devDependencies中。

• -O, --save-optional: 包將出現(xiàn)在您的optionalDependencies中。

• --no-save: 不要保存到依賴(lài)項(xiàng)中。

四、安裝CNPM

npmmirror 中國(guó)鏡像站

$ npm install -g cnpm --registry=https://registry.npmmirror.com

五、關(guān)于npm run

1、npm run XXX是執(zhí)行配置在package.json中的scripts 配置的 value。

"scripts": { 
"serve": "vue-cli-service serve", 
"build": "vue-cli-service build", 
"lint": "vue-cli-service lint" 
},

npm run serve 實(shí)際運(yùn)行的是 vue-cli-service serve

2、比如： 
只有在package.json中的腳本配置了，你才能run，所以不是所有的項(xiàng)目都能npm run dev/build。 
要了解這些命令做了什么，就要去scripts中看具體執(zhí)行的是什么代碼。 
這里就像是一些命令的快捷方式，免去每次都要輸入很長(zhǎng)的的命令（比如unit那行）。

3、dev和serve的區(qū)別

• npm run dev 是vue-cli2.0版本使用的

• npm run serve 是vue-cli3.0版本使用的

4、查看當(dāng)前項(xiàng)目的所有 npm 腳本命令 
其實(shí)也可以在package.json的看scripts對(duì)象里有什么屬性

npm run

5、dev，build等沒(méi)有強(qiáng)制含義，我們?cè)谕ǔＧ闆r下：

• 使用dev/serve時(shí)，指的是和開(kāi)發(fā)環(huán)境相關(guān)的事情。配置了hot-loader之類(lèi)方便調(diào)試的工具。

• 使用build時(shí)，通常就是指和“編譯”生產(chǎn)環(huán)境相關(guān)的事情,沒(méi)有其他多余的東西。

• 當(dāng)使用dist時(shí)，通常就指和發(fā)布相關(guān)的事情。

如果對(duì)npm run這一些列腳本命令有疑惑，可以看npm-hooks

六、npm與Yarn

Yarn發(fā)布于2016年10月。

1、安裝yarn

npm install -g yarn

2、yarn和npm命令對(duì)比：

npm install : yarn 
npm install react : yarn add react 
npm uninstall react : yarn remove react 
npm install react --save-dev : yarn add react --dev 
npm update : yarn upgrade 
npm run build : yarn run build

3、yarn的優(yōu)點(diǎn)：

• 速度快 。速度快主要來(lái)自以下兩個(gè)方面： 
  1、并行安裝： 
  無(wú)論 npm 還是 Yarn 在執(zhí)行包的安裝時(shí)，都會(huì)執(zhí)行一系列任務(wù)。npm 是按照隊(duì)列執(zhí)行每個(gè) package，也就是說(shuō)必須要等到當(dāng)前 package 安裝完成之后，才能繼續(xù)后面的安裝。而 Yarn 是同步執(zhí)行所有任務(wù)，提高了性能。 
  2、離線模式： 
  如果之前已經(jīng)安裝過(guò)一個(gè)軟件包，用Yarn再次安裝時(shí)之間從緩存中獲取，就不用像npm那樣再?gòu)木W(wǎng)絡(luò)下載了。

• 安裝版本統(tǒng)一： 
  為了防止拉取到不同的版本，Yarn 有一個(gè)鎖定文件 (lock file) 記錄了被確切安裝上的模塊的版本號(hào)。每次只要新增了一個(gè)模塊，Yarn 就會(huì)創(chuàng)建（或更新）yarn.lock 這個(gè)文件。這么做就保證了，每一次拉取同一個(gè)項(xiàng)目依賴(lài)時(shí)，使用的都是一樣的模塊版本。npm 其實(shí)也有辦法實(shí)現(xiàn)處處使用相同版本的 packages，但需要開(kāi)發(fā)者執(zhí)行 npm shrinkwrap 命令。這個(gè)命令將會(huì)生成一個(gè)鎖定文件，在執(zhí)行 npm install 的時(shí)候，該鎖定文件會(huì)先被讀取，和 Yarn 讀取 yarn.lock 文件一個(gè)道理。npm 和 Yarn 兩者的不同之處在于，Yarn 默認(rèn)會(huì)生成這樣的鎖定文件，而 npm 要通過(guò) shrinkwrap 命令生成 npm-shrinkwrap.json 文件，只有當(dāng)這個(gè)文件存在的時(shí)候，packages 版本信息才會(huì)被記錄和更新。

• 更簡(jiǎn)潔的輸出： 
  npm 的輸出信息比較冗長(zhǎng)。在執(zhí)行 npm install 的時(shí)候，命令行里會(huì)不斷地打印出所有被安裝上的依賴(lài)。相比之下，Yarn 簡(jiǎn)潔太多：默認(rèn)情況下，結(jié)合了 emoji直觀且直接地打印出必要的信息，也提供了一些命令供開(kāi)發(fā)者查詢(xún)額外的安裝信息。

• 多注冊(cè)來(lái)源處理： 
  所有的依賴(lài)包，不管他被不同的庫(kù)間接關(guān)聯(lián)引用多少次，安裝這個(gè)包時(shí)，只會(huì)從一個(gè)注冊(cè)來(lái)源去裝，要么是 npm 要么是 bower, 防止出現(xiàn)混亂不一致。

• 更好的語(yǔ)義化： yarn改變了一些npm命令的名稱(chēng)，比如 yarn add/remove，感覺(jué)上比 npm 原本的 install/uninstall 要更清晰。

感謝各位的閱讀，以上就是“npm怎么安裝與使用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)npm怎么安裝與使用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！