npm的安裝與使用

一、由來

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

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

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

2、GItHub 興起之後，社區中也有人使用 GitHub 的下載功能：

3、麻煩

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

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

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

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

4、具體步驟

NPM 的思路大概是這樣的：

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

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

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

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

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

5、發展

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

隻有社區裡的人都覺得 「npm 是個寶」的時候，John Resig 才會考慮使用 npm。

那麼 npm 是怎麼火的呢？

npm 的發展是跟 Node.js 的發展相輔相成的。

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

後來的事情大傢都知道，Node.js 火瞭。

隨著 Node.js 的火爆，大傢開始用 npm 來共享 JS 代碼瞭，於是 jQuery 作者也將 jQuery 發佈到 npm 瞭。

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

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

二、npm安裝

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

• npm: Nodejs下的包管理器。
• webpack: 它主要的用途是通過CommonJS的語法把所有瀏覽器端需要發佈的靜態資源做相應的準備，比如資源的合並和打包。
• 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包管理器，同時將兩者自動添加到系統的環境變量。

一路點Next,最後點Finish完成

2、檢查安裝目錄，檢查文件系統是否正常。

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

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

查看node.js和npm的環境變量是否增加

echo %Path%

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

node –v
# v12.18.0

npm –v
# 6.14.4

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

npm list -global

註意：npm的本地全局倉庫在C系統盤的用戶目錄。即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 目錄，會在當前執行 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本地緩存，用於對付使用相同版本號發佈新版本代碼的人。
• npm unpublish @：可以撤銷發佈自己發佈過的某個版本代碼。
• npm help：可查看所有命令。
• npm help ：可查看某條命令的詳細幫助，例如npm help install。

3、使用 package.json

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

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

創建package.json文件

• 手動創建
• 或者 通過 npm init 命令生成遵守規范的 package.json文件

4、更改全局安裝目錄

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

npm config set prefix <目錄>

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

prefix = /home/yourUsername/npm

更改目錄後記得在系統環境變量 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是執行配置在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中看具體執行的是什麼代碼。 
這裡就像是一些命令的快捷方式，免去每次都要輸入很長的的命令（比如unit那行）。

3、dev和serve的區別

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

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

npm run

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

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

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

六、npm與Yarn

Yarn發佈於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的優點：

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

到此這篇關於npm安裝與使用的文章就介紹到這瞭。希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：

• 一文帶你瞭解前端包管理工具npm、yarn和pnpm
• 詳解npm和cnpm混用的坑
• Node.js包管理器npm的具體使用
• 使用nodejs + koa + typescript 集成和自動重啟的問題
• yarn的安裝及使用詳解