什么是npm系列：一、npm簡介

dcr309duan 發布于2019-08-26 10:48 / 1107人閱讀

摘要：本文是系列的第一篇，知識很基礎，作為一個熱身文章，如果各位已經是開發熟練工了，完全可以跳過這篇。系列匯總什么是系列一簡介什么是系列二的十八般武藝本文同步發表博客什么是系列一簡介

npm是Node.js的包管理工具，它的誕生也極大的促進了前端的發展，在現代前端開發中都離不開npm的身影。

本文是npm系列的第一篇，知識很基礎，作為一個熱身文章，如果各位已經是開發熟練工了，完全可以跳過這篇。

1. 安裝 npm

npm 是基于 Node.js，所以我們需要安裝 Node.js，方式有兩種：

Node.js 網站

nvm (建議) 具體文章可以搜索下

2. 使用 2.1 如何更新npm

// 查看npm版本
npm -v
// 更新npm自身
npm install npm@latest -g

2.2 安裝依賴

在實際使用中我們既安裝本地包（項目依賴），也會安裝全局包（命令行工具）。

如何管理本地包

可以使用下面的命令來安裝一個包：

npm install

移除包可以用指令：

npm uninstall

在項目中安裝包時默認會安裝到dependencies中，我們可以通過以下參數來控制這個行為：

-P, --save-prod：記錄在dependencies中

-D, --save-dev：記錄在devDependencies中

-O, --save-optional：記錄在optionalDependencies中

--no-save：不會記錄在dependencies中

除此之外還有兩個額外的參數：

-E, --save-exact：版本號不會按照語義化記錄，會顯示具體的"1.2.3"

-B, --save-bundle：依賴也會記錄在bundleDependencies中

如需從 package.json 文件中刪除依賴，需要在命令后添加參數:

npm uninstall --save lodash

// 通過--save-dev安裝的包，移除的時候也需指定為--save-dev將其卸載
npm uninstall --save-dev webpack

如何安裝全局包

全局安裝一般是用來安裝命令行工具，諸如gulp、http-server，我們只需要在后面加上-g，比如：

npm install -g http-server

有時候我們記不清某個包，想查看所有已安裝的包應該用什么命令呢：

// depth代表遍歷的深度，如果沒有該參數，會把所有包的依賴也顯示
npm list -g --depth 0

2.3 package-lock.json

項目中安裝依賴后在自動生成package-lock.json文件，里面包含安裝的依賴信息，主要是用來鎖定依賴版本，確保團隊之間安裝依賴時不會出現差異。

3. dependencies

前面提到dependencies的概念，那在npm中都有哪些依賴呢？

dependencies 生產環境

devDependencies 開發環境

optionalDependencies 可選依賴

peerDependencies 前置依賴

bundleDependencies 待打包依賴（沒找到具體名稱，可以看下后面的具體介紹）

3.1 dependencies && devDependencies

這兩個是我們使用的最多的，也是最需要注意的。

假設我們有一個插件magic-lint，它的作用是在提交commit時檢查以及格式化代碼，那么里面至少有prettier插件用來美化代碼，我們需要確保其他用戶安裝magic-lint之后能正常使用，那就要把prettier列為dependencies。

另外我們在開發magic-lint過程是屬于開發環境，我們會需要jest來測試，普通用戶安裝時是不需要jest，我們把jest列為devDependencies后就可以避免這樣的情況。

如果添加--production標記，或者環境變量NODE_ENV被設置為production, npm就不會安裝devDependencies中的模塊。

3.2 peerDependencies

那什么時候用peerDependencies呢？

假設我們有一個webpack-plugin-god插件，它只是webpack的插件，并不依賴webpack，所以在dependencies或devDependencies中不會寫明webpack，但事實上它又是針對特定的webpack版本開發，這個時候我們就可以把webpack寫入peerDependencies中。

3.3 optionalDependencies

如果有一個包屬于可與有無的，我們就可以把它歸為optionalDependencies

寫代碼時我們可以這樣使用可選包：

try {
  var foo = require("foo")
  var fooVersion = require("foo/package.json").version
} catch (er) {
  foo = null
}
if ( notGoodFooVersion(fooVersion) ) {
  foo = null
}

// .. then later in your program ..

if (foo) {
  foo.doFooThings()
}

3.4 bundleDependencies

假設我們有一個package.json：

{
  "name": "awesome-web-framework",
  "version": "1.0.0",
  "bundledDependencies": [
    "renderized", "super-streams"
  ]
}

通過npm pack命令我們可以得到文件awesome-web-framework-1.0.0.tgz，里面會包含renderized和super-streams兩個依賴。

在項目中執行npm install awesome-web-framework-1.0.0.tgz，結構也會變為：

├── node_modules
    ├── awesome-web-framework
    │   └── renderized
    │   └── super-streams
    └── xxx

4. 預告

下一篇將講解 npm install，看了之后，希望能夠讓你驚嘆一下：“哇~ 原來還可以這樣”，我就心滿意足了。

系列匯總

什么是npm系列：一、npm簡介

什么是npm系列：二、install 的十八般武藝

to be continued

本文同步發表博客: 什么是npm系列：一、npm簡介

GPU云服務器云服務器 npm npm810 npm cdn npm webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106787.html

安裝項目依賴包---基于Ant-Design-Pro-2-0-的CMS管理后臺入門系列

摘要：安裝項目依賴包根據自身習慣的方式，自行選擇使用或進行安裝依賴包。安裝完成會顯示部分警報，暫時忽略。如果安裝最后顯示錯誤，請自行搜索查詢錯誤信息。安裝項目依賴包根據自身習慣的方式，自行選擇使用 npm 或 yarn 進行安裝依賴包。注意：如果選擇 npm 安裝，后面的命令都是用 npm 命令，包括 npm start / npm build 等；選擇 yarn 安裝同樣如此。請勿將...

wemallshop 2019-08-23 14:38 評論0 收藏0
ch01-vue.js簡介、環境搭建及腳手架工具

摘要：一簡介是一個用于構建交互式界面的直觀快速和可組合的框架。的兼容性不支持及其以下版本，因為使用了不能模擬的特性。這是簡潔的語法和強勁的性能的基礎。的組件一個文件由三部分組成，分別體現為個標簽。一、Vuejs簡介 Vue.js - Intuitive, Fast and Composable MVVM for building interactive interfaces. vue.js...

Tychio 2019-08-20 15:41 評論0 收藏0
前端構建工具（2） -- npm&yarn

摘要：如果使用了代表代表，則跳過提問階段，直接生成一個新的文件。前言簡介:node的包管理器,它隨nodejs一起安裝，即你安裝了nodejs就可以用npm進行包管理，通過npm可以從npm服務器下載別人上傳的第三方庫，下載并安裝別人上傳的命令行程序，上傳自己寫的第三方庫和命令行程序可用npm -v查看npm版本號確定npm是否可用，如果npm版本過低，可以使用npm -install ...

zhangke3016 2019-08-22 16:30 評論0 收藏0
朋友，這里有個倉庫需要你 PR 一下

摘要：發現倉庫被了很多次，因此下定決心要好好的把代碼整理一下，方便大家查看代碼以及更加愉快的。雖然這個簡介有點短，但是該篇的目的并不在于讓大家了解這個矩陣動畫，而是想讓大家一起來豐富這個倉庫。前段時間，發布了一篇文章：學不動了，來點有趣的吧。發現 github 倉庫被 frok 了很多次，因此下定決心要好好的把代碼整理一下，方便大家查看代碼以及更加愉快的 Pull Request。簡介 ...

roadtogeek 2019-08-30 11:06 評論0 收藏0