npm詳解

npm 是什么？

npm（node package manager）：node.js 的包管理器，用于node插件管理（包括安裝、卸載、管理依賴等） ，npm 是隨同 node.js 一起安裝的包管理工具，能解決 node.js 代碼部署上的很多問題，常見的使用場景有以下幾種：

允許用戶從 npm 服務器下載別人編寫的第三方包到本地使用。

允許用戶從 npm 服務器下載并安裝別人編寫的命令行程序到本地使用。

允許用戶將自己編寫的包或命令行程序上傳到 npm 服務器供別人使用。

npm是一個包管理器，它讓 javascript 開發者分享、復用代碼更方便.在程序開發中我們常常需要依賴別人提供的框架，寫js 也不例外。這些可以重復的框架代碼被稱作包(package)或者模塊(module)，一個包可以是一個文件夾里放著幾個文件，同時有一個叫做 package.json的文件.

一個網站里通常有幾十甚至上百個package，分散在各處，通常會將這些包按照各自的功能進行劃分（類似安卓開發中的劃分子模塊)，但是如果重復造一些輪子，不如上傳到一個公共平臺，讓更多的人一起使用、參與這個特定功能的模塊。而npm 的作用就是讓我們發布、下載一些JS輪子更加方便。

可以去官方網站：https://www.npmjs.com/，瀏覽、搜索想要的輪子，也可以直接在命令行中 search一下。

如：npm中搜索 jQuery

使用npm后可以非常方便地查看依賴的輪子是否有更新、是否需要下載新版本?，F在知道npm是干什么的了。當人們說起“npm”時，可能在說三個東西：

1.一個網站，就是前面提到用于搜索JS模塊的網站：https://www.npmjs.com/

2.一個倉庫，保存著人們分享的JS模塊的大數據庫

3.命令行里的客戶端，開發者使用它來管理、安裝、發布模塊

接地氣的描述：npm 類似于如下各大手機應用市場

只要開發者發布某個模塊到倉庫中，其他人就可以從npm網站或者命令行中下載、使用它了。

安裝 npm

安裝 node.js 的時候會相應的安裝 npm，node.js 已經集成了 npm，所以安裝 node.js 后 npm 也安裝好了。

下載官網：https://nodejs.org/en/

中文學習node API 文檔：http://nodejs.cn/

查看本地 node 和 npm 是否安裝成功

更新 npm

npm 更新地可比 node勤快多了，因此你下載的node附帶的 npm 版本可能不是最新的，你可以使用如下命令下載最新 npm：

npm install npm@latest -g 相當于 npm install 王者榮耀@最新版 -全局 華為應用市場 安裝 王者榮耀@最新版 -全局

或

npm install -g npm

其中install不用介紹了，就是安裝，后面的npm@latest就是@的格式，@后面加上版本號。在下載其他模塊時也是這個格式。-g 代表全局安裝。

package.json 文件

npm 的全稱：Node Package Manager，中文意思：node包管理器。

管理本地安裝npm包的最好方式就是創建package.json文件。一個 package.json文件可以有以下幾點作用：

作為一個描述文件，描述了你的項目依賴哪些包

允許使用“語義化版本規則”(后面介紹)指明你項目依賴包的版本

讓你的構建更好地與其他開發者分享，便于重復使用

案例：在新建的空文件夾中 npm 下載 jQuery 包

npm install jquery

而 jQuery 就在 node_module 文件夾下：

package.json 如何創建

使用 npm init 即可在當前目錄創建一個 package.json 文件:

通過如下一問一答的模式就創建好了一個 package.json 文件

輸入npm init后會彈出一堆問題，可以輸入對應內容，也可以使用默認值。在回答一堆問題后輸入yes 就會生成圖中所示內容的 package.json文件。

如果嫌回答這一大堆問題麻煩，可以直接輸入npm init --yes 跳過回答問題步驟，直接生成默認值的 package.json 文件:

package.json 的內容

package.json文件至少要有兩部分內容：

“name”：全部小寫，沒有空格，可以使用下劃線或者橫線

“version”： x.x.x 的格式，符合 “語義化版本規則”

如：

"name": "demo-package", "version": "1.0.0",

案例：在一個空文件夾下初始化創建 package.json

這些默認生成的都可以去修改

其他內容:

description：描述信息，有助于搜索

main：入口文件，一般都是 index.js

scripts：支持的腳本，默認是一個空的 test

license ：默認是 MIT

bugs：當前項目的一些錯誤信息，如果有的話

可以為init命令設置一些默認值，比如：

> npm set init.author.email "xxx@gmail.com" > npm set init.author.name "xdr630" > npm set init.license "MIT"

scripts 案例詳解：把上面初始化的 package.json 做如下修改

執行

npm run abc

查看

案例：把下載的jQuery配置記錄到package.json中

沒安裝之前的文件夾：

npm install jquery -D

發現 pcakage.json 改變了

在安裝個 bootstrap，這次不帶 -D

npm install bootstrap

發現不帶 -D ，放在dependencies，加上-D，就放在devDependencies

通過 npm install 包名稱 下載的文件都會保存在當前文件夾下的 node_module 下，如：

打開文件夾，發現有剛剛下載好的兩個文件

這就是剛剛 npm 下載的兩個包，都在 node_module 下，并且記錄的信息都在同一個 package.json 下

dependencies（生產環境）和 devDependencies（開發環境）的區別

就是在項目的開發階段就是開發環境；項目上線了，開始正式提供對外服務，上線后的階段就是生產環境。 在生產環境下，一般會關掉錯誤報告，打開錯誤日志等操作。

devDependencies 配置的是開發環境，安裝項目開發時所依賴的模塊。比如像webpack工具，只是用來構建項目和打包，這些都是在開發階段才使用的，等項目上線后就用不到webpack工具了，那么就可以把webpack安裝到開發環境中，使用 --save-dev 命令安裝到devdependencies下，命令語法：

npm install --save-dev packageName # 簡寫 npm i -D packageName

dependencies配置的是生產環境，安裝項目運行時所依賴的模塊。比如jQuery庫，等項目上線以后依然是要繼續使用的，我們就要安裝在生產環境中，如果沒有把需要的依賴安裝到生產環境中，項目上線運行時就有可能會報錯。使用 --save 命令安裝到 dependencies 下，命令語法：

npm install --save packageName # 簡寫 npm i -S packageName

總結

使用npm安裝依賴時，–save和–save-dev

使用–save安裝的依賴，會被寫到dependencies區塊里面去。

而使用–save-dev安裝依賴，則會被寫到devDependencies區塊里面去

什么都不寫，只是本地安裝，并非全局。這時候會被寫到dependencies區塊里面去。

在package.json 文件中dependencies和devDependencies的區別

devDependencies 里面的依賴只用于開發環境，不用于生產環境。而 dependencies 依賴的包不僅開發環境能使用，生產環境也能使用。

兩種環境的的指定方式是通過配置文件中的NODE_ENV=developement或NODE_ENV=production來指定是開發還是生產環境的。

使用的一些構建工具例如glup、webpack這些只是在開發中使用的包，上線以后就和他們沒關系了，所以將它寫入devDependencies

指定安裝包的版本

npm install jquery@3.4.1 npm install bootstrap@4.4.1

自定義 package.json 安裝包文件

首先在一個空的文件夾下使用 npm init 初始化生成一個 package.json 文件，打開對里面的內容進行添加，如：下載 jQuery 和 bootstrap 的包文件

使用命令 npm install 進行安裝即可。這個命令會識別剛剛自定義 package.json 中需要安裝的文件

npm install 可以簡寫 為 npm i

引用文件庫

一般引用都是直接在本地路徑下：