npm的安裝與使用

2022-06-09 14:00:52

一、由來

前端是怎麼共用程式碼的呢？

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:Usersbobin.yangAppDataRoamingnpm。

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:Usersbobin.yangAppDataRoamingnpm，否則為安裝到當前目錄下。

單獨更新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使用者名稱AppDataRoamingnpmnode_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安裝與使用的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援it145.com。