npm詳解

npm 是什麼？

1. npm（node package manager）

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

• 允許使用者從 npm 伺服器下載下傳别人編寫的第三方包到本地使用。
• 允許使用者從 npm 伺服器下載下傳并安裝别人編寫的指令行程式到本地使用。
• 允許使用者将自己編寫的包或指令行程式上傳到 npm 伺服器供别人使用。

1. npm

   是一個包管理器，它讓 javascript 開發者分享、複用代碼更友善.在程式開發中我們常常需要依賴别人提供的架構，寫js 也不例外。這些可以重複的架構代碼被稱作

   包(package)或者子產品(module)

   ，一個包可以是一個檔案夾裡放着幾個檔案，同時有一個叫做

   package.json

   的檔案.
2. 一個網站裡通常有幾十甚至上百個

   package

   ，分散在各處，通常會将這些包按照各自的功能進行劃分（類似安卓開發中的劃分子子產品)，但是如果重複造一些輪子，不如上傳到一個公共平台，讓更多的人一起使用、參與這個特定功能的子產品。而

   npm

   的作用就是讓我們釋出、下載下傳一些JS輪子更加友善。
3. 可以去官方網站： https://www.npmjs.com/ ，浏覽、搜尋想要的輪子，也可以直接在指令行中

   search

   一下。

• 如：npm中搜尋 jQuery

1. 使用npm後可以非常友善地檢視依賴的輪子是否有更新、是否需要下載下傳新版本。現在知道npm是幹什麼的了。當人們說起“

   npm

   ”時，可能在說三個東西：

1.一個網站，就是前面提到用于搜尋JS子產品的網站：

2.一個倉庫，儲存着人們分享的JS子產品的大資料庫

3.指令行裡的用戶端，開發者使用它來管理、安裝、釋出子產品

1. 接地氣的描述：

   npm

   類似于如下各大手機應用市場

1. 隻要開發者釋出某個子產品到倉庫中，其他人就可以從npm網站或者指令行中下載下傳、使用它了。

安裝 npm

1. 安裝 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

  檔案可以有以下幾點作用：

1. 作為一個描述檔案，描述了你的項目依賴哪些包
2. 允許使用“語義化版本規則”(後面介紹)指明你項目依賴包的版本
3. 讓你的建構更好地與其他開發者分享，便于重複使用

• 案例：在建立的空檔案夾中 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檔案至少要有兩部分内容：

1. "name"：全部小寫，沒有空格，可以使用下劃線或者橫線
2. "version"： x.x.x 的格式，符合 “語義化版本規則”

• 如：

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

• 案例：在一個空檔案夾下初始化建立

  package.json

• 這些預設生成的都可以去修改

• 其他内容:
  • description：描述資訊，有助于搜尋
  • main：入口檔案，一般都是

    index.js

  • scripts：支援的腳本，預設是一個空的

    test

  • keywords：關鍵字，有助于在人們使用

    npm search

    搜尋時發現你的項目

    author

    :作者資訊
  • license ：預設是

    MIT

  • bugs：目前項目的一些錯誤資訊，如果有的話
  • 可以為

    init

    指令設定一些預設值，比如：

> npm set init.author.email "[email protected]"
> 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           

• 總結

配置項	dependencies	devDependencies
	--save 簡寫 -S	生産環境，管理的依賴包在項目上線後依然有效
	--save-dev 簡寫 -D	開發環境，管理的依賴包僅在開發階段有效

1. 使用npm安裝依賴時，

   –save

   和

   –save-dev

• –save

  安裝的依賴，會被寫到

  dependencies

  區塊裡面去。
• 而使用

  –save-dev

  安裝依賴，則會被寫到

  devDependencies

  區塊裡面去
• 什麼都不寫，隻是本地安裝，并非全局。這時候會被寫到

  dependencies

1. 在

   package.json

   檔案中

   dependencies

   devDependencies

   的差別

• devDependencies

  裡面的依賴隻用于開發環境，不用于生産環境。而

  dependencies

  依賴的包不僅開發環境能使用，生産環境也能使用。
• 兩種環境的的指定方式是通過配置檔案中的

  NODE_ENV=developement

  NODE_ENV=production

  來指定是開發還是生産環境的。
• 使用的一些建構工具例如

  glup、webpack

  這些隻是在開發中使用的包，上線以後就和他們沒關系了，是以将它寫入

  devDependencies

指定安裝包的版本

npm install [email protected]
npm install [email protected]           

自定義 package.json 安裝封包件

• 首先在一個空的檔案夾下使用 npm init 初始化生成一個 package.json 檔案，打開對裡面的内容進行添加，如：下載下傳 jQuery 和 bootstrap 的封包件

• 使用指令

  npm install

  進行安裝即可。這個指令會識别剛剛自定義

  package.json

  中需要安裝的檔案

• npm install

  可以簡寫 為

  npm i

引用檔案庫

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

<script src= 。/node_modules/jquery/dist/jquery.min.js'><script>           

• 通過定義變量引用：

• require(名字）

  ，它是直接在

  node_modules

  中去尋找這個名字對應的檔案夾，找不到就報錯

const $ = require( 'jquery ' );
console.log($.addclass());