一、由來

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

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

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

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

3、麻煩

當一個網站依賴的代碼越來越多，程序員發(fā)現這是一件很麻煩的事情：

• 去 jQuery 官網下載 jQuery
• 去 BootStrap 官網下載 BootStrap
• 去 Underscore 官網下載 Underscore
• ……

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

這個工具就是他用 JavaScript （運行在 Node.js 上）寫的 npm，全稱是 Node Package Manager

4、具體步驟

NPM 的思路大概是這樣的：

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

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

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

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

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

5、發(fā)展

Isaaz 通知 jQuery 作者 John Resig，他會答應嗎？這事兒不一定啊，對不對。

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

那么 npm 是怎么火的呢？

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

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

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

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

所以現在，你可以使用 npm install jquery 來下載 jQuery 代碼。

現在用 npm 來分享代碼已經成了前端的標配。

二、npm安裝

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

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

1、下載nodejs

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

如圖，下載12.18.0 LTS （推薦給絕大部分用戶使用）直接點擊就會自動下載了。

下載后雙擊安裝

可以使用默認路徑。

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

一路點Next,最后點Finish完成

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

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

3、打開CMD，檢查是否正常

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

echo %Path%

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

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

我們關注一個用戶配置文件.npmrc，可以看到剛才的配置信息

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

命令1

npm config get registry

命令2

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

8、升級npm為最新版本

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

單獨更新npm ：

npm install npm -g

再次查看npm的版本：

npm -v

再次查看global里的模塊，現在不為空了，已經讀了NPM模塊了。

npm list -global

三、NPM 用法

1、包安裝方式

• “本地安裝” 指的是將一個模塊下載到當前項目的 node_modules 子目錄，然后只有在項目目錄之中，才能調用這個模塊。 
  “本地安裝” 將安裝包放在 ./node_modules 下（運行 npm 命令時所在的目錄），如果沒有 node_modules 目錄，會在當前執(zhí)行 npm 命令的目錄下生成 node_modules 目錄。 
  可以通過 require() 來引入本地安裝的包。
• “全局安裝”將安裝包放在 /usr/local 下或者C:\Users\用戶名\AppData\Roaming\npm\node_modules。 
  它可以直接在命令行里使用，這是使用全局安裝的主要原因。

本地模式和全局模式的特點如下：

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

2、常用命令

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

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

3、使用 package.json

當你的項目需要依賴多個包時，推薦使用 package.json。其優(yōu)點為：

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

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

• 手動創(chuàng)建
• 或者 通過 npm init 命令生成遵守規(guī)范的 package.json文件

4、更改全局安裝目錄

使用npm config命令可以達到此目的。

npm config set prefix <目錄>

或者手動在 ~/.npmrc文件中進行配置：

prefix = /home/yourUsername/npm

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

export PATH=~/npm/bin:$PATH

5、安裝時保存到依賴項

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

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

四、安裝CNPM

npmmirror 中國鏡像站

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

五、關于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 實際運行的是 vue-cli-service serve

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

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

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

4、查看當前項目的所有 npm 腳本命令 
其實也可以在package.json的看scripts對象里有什么屬性

npm run

5、dev，build等沒有強制含義，我們在通常情況下：

• 使用dev/serve時，指的是和開發(fā)環(huán)境相關的事情。配置了hot-loader之類方便調試的工具。
• 使用build時，通常就是指和“編譯”生產環(huán)境相關的事情,沒有其他多余的東西。
• 當使用dist時，通常就指和發(fā)布相關的事情。

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

六、npm與Yarn

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

1、安裝yarn

npm install -g yarn

2、yarn和npm命令對比：

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)點：

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

到此這篇關于npm安裝與使用的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論