一、由來

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

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

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

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

3、麻煩

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

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

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

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

4、具體步驟

NPM 的思路大概是這樣的：

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

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

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

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

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

5、發(fā)展

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

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

那么 npm 是怎么火的呢？

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

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

后來的事情大家都知道，Node.js 火了。

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

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

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

二、npm安裝

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

• npm: Nodejs下的包管理器。
• webpack: 它主要的用途是通過CommonJS的語法把所有瀏覽器端需要發(fā)布的靜態(tài)資源做相應(yīng)的準(zhǔn)備，比如資源的合并和打包。
• vue-cli: 用戶生成Vue工程模板。（幫你快速開始一個(gè)vue的項(xiàng)目，也就是給你一套vue的結(jié)構(gòu)，包含基礎(chǔ)的依賴庫，只需要 npm install就可以安裝）

1、下載nodejs

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

如圖，下載12.18.0 LTS （推薦給絕大部分用戶使用）直接點(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、打開CMD，檢查是否正常

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

echo %Path%

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

node –v
# v12.18.0

npm –v
# 6.14.4

4、查看npm的本地全局倉庫

npm list -global

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

5、配置鏡像站

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

6、 顯示所有配置信息

npm config list

我們關(guān)注一個(gè)用戶配置文件.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í)所在的目錄），如果沒有 node_modules 目錄，會(huì)在當(dāng)前執(zhí)行 npm 命令的目錄下生成 node_modules 目錄。 
  可以通過 require() 來引入本地安裝的包。
• “全局安裝”將安裝包放在 /usr/local 下或者C:\Users\用戶名\AppData\Roaming\npm\node_modules。 
  它可以直接在命令行里使用，這是使用全局安裝的主要原因。

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

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

2、常用命令

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

• npm install -g：安裝模塊
• npm uninstall ： 卸載模塊
• npm search ：搜索模塊
• npm list：以樹形結(jié)構(gòu)列出當(dāng)前項(xiàng)目安裝的所有模塊，以及它們依賴的模塊。
• npm update ：可以把當(dāng)前目錄下node_modules子目錄里邊的對(duì)應(yīng)模塊更新至最新版本。
• npm cache clear：可以清空NPM本地緩存，用于對(duì)付使用相同版本號(hào)發(fā)布新版本代碼的人。
• npm unpublish @：可以撤銷發(fā)布自己發(fā)布過的某個(gè)版本代碼。
• npm help：可查看所有命令。
• npm help ：可查看某條命令的詳細(xì)幫助，例如npm help install。

3、使用 package.json

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

• 它以文檔的形式規(guī)定了項(xiàng)目所依賴的包
• 可以確定每個(gè)包所使用的版本
• 項(xiàng)目的構(gòu)建可以重復(fù)，在多人協(xié)作時(shí)更加方便

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

• 手動(dòng)創(chuàng)建
• 或者 通過 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í)保存到依賴項(xiàng)

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

• -P, --save-prod: 包將出現(xiàn)在您的依賴項(xiàng)中。除非存在-D或-O，否則這是默認(rèn)設(shè)置。
• -D, --save-dev: 包將出現(xiàn)在您的devDependencies中。
• -O, --save-optional: 包將出現(xiàn)在您的optionalDependencies中。
• --no-save: 不要保存到依賴項(xiàng)中。

四、安裝CNPM

npmmirror 中國鏡像站

$ 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í)行的是什么代碼。 
這里就像是一些命令的快捷方式，免去每次都要輸入很長的的命令（比如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等沒有強(qiáng)制含義，我們?cè)谕ǔＧ闆r下：

• 使用dev/serve時(shí)，指的是和開發(fā)環(huán)境相關(guān)的事情。配置了hot-loader之類方便調(diào)試的工具。
• 使用build時(shí)，通常就是指和“編譯”生產(chǎn)環(huán)境相關(guān)的事情,沒有其他多余的東西。
• 當(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)：

• 速度快 。速度快主要來自以下兩個(gè)方面： 
  1、并行安裝： 
  無論 npm 還是 Yarn 在執(zhí)行包的安裝時(shí)，都會(huì)執(zhí)行一系列任務(wù)。npm 是按照隊(duì)列執(zhí)行每個(gè) package，也就是說必須要等到當(dāng)前 package 安裝完成之后，才能繼續(xù)后面的安裝。而 Yarn 是同步執(zhí)行所有任務(wù)，提高了性能。 
  2、離線模式： 
  如果之前已經(jīng)安裝過一個(gè)軟件包，用Yarn再次安裝時(shí)之間從緩存中獲取，就不用像npm那樣再從網(wǎng)絡(luò)下載了。
• 安裝版本統(tǒng)一： 
  為了防止拉取到不同的版本，Yarn 有一個(gè)鎖定文件 (lock file) 記錄了被確切安裝上的模塊的版本號(hào)。每次只要新增了一個(gè)模塊，Yarn 就會(huì)創(chuàng)建（或更新）yarn.lock 這個(gè)文件。這么做就保證了，每一次拉取同一個(gè)項(xiàng)目依賴時(shí)，使用的都是一樣的模塊版本。npm 其實(shí)也有辦法實(shí)現(xiàn)處處使用相同版本的 packages，但需要開發(fā)者執(zhí)行 npm shrinkwrap 命令。這個(gè)命令將會(huì)生成一個(gè)鎖定文件，在執(zhí)行 npm install 的時(shí)候，該鎖定文件會(huì)先被讀取，和 Yarn 讀取 yarn.lock 文件一個(gè)道理。npm 和 Yarn 兩者的不同之處在于，Yarn 默認(rèn)會(huì)生成這樣的鎖定文件，而 npm 要通過 shrinkwrap 命令生成 npm-shrinkwrap.json 文件，只有當(dāng)這個(gè)文件存在的時(shí)候，packages 版本信息才會(huì)被記錄和更新。
• 更簡潔的輸出： 
  npm 的輸出信息比較冗長。在執(zhí)行 npm install 的時(shí)候，命令行里會(huì)不斷地打印出所有被安裝上的依賴。相比之下，Yarn 簡潔太多：默認(rèn)情況下，結(jié)合了 emoji直觀且直接地打印出必要的信息，也提供了一些命令供開發(fā)者查詢額外的安裝信息。
• 多注冊(cè)來源處理： 
  所有的依賴包，不管他被不同的庫間接關(guān)聯(lián)引用多少次，安裝這個(gè)包時(shí)，只會(huì)從一個(gè)注冊(cè)來源去裝，要么是 npm 要么是 bower, 防止出現(xiàn)混亂不一致。
• 更好的語義化： yarn改變了一些npm命令的名稱，比如 yarn add/remove，感覺上比 npm 原本的 install/uninstall 要更清晰。

到此這篇關(guān)于npm安裝與使用的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。