摘自 ?https://blog.csdn.net/u011240877/article/details/76582670#什么是-npm

?

npm 是前端開發(fā)廣泛使用的包管理工具，之前使用 Weex 時(shí)看了阮一峰前輩的文章了解了一些，這次結(jié)合官方文章總結(jié)一下，加深下理解吧！

讀完本文你將了解：

?

• 什么是 npm
• 安裝 npm
• 更新 npm
• packagejson 文件
  • packagejson 如何創(chuàng)建
  • packagejson 的內(nèi)容
  • 指定依賴的包
  • Semantic versioning語義化版本規(guī)則
• 安裝 package
  • 本地安裝 package
    • 安裝參數(shù) --save 和 --save -dev
    • 使用下載好的包
    • 更新本地 package
    • 卸載本地 package
  • 全局安裝 package
    • 全局安裝的權(quán)限問題
    • 更新全局的 package
    • 卸載全局 package
• 其他命令
  • npm run
  • npm install from github
  • npm info
  • npm adduser
  • npm homerepo
  • npm prune
  • npm publish
• 國內(nèi)鏡像
• 總結(jié)
• Thanks

?

什么是 npm？

官方文檔中對(duì)它的介紹是：

npm makes it easy for JavaScript developers to share and reuse code, and it makes it easy to update the code that you’re sharing.

即： npm 是一個(gè)包管理器，它讓 JavaScript 開發(fā)者分享、復(fù)用代碼更方便（有點(diǎn) maven 的感覺哈）。

在程序開發(fā)中我們常常需要依賴別人提供的框架，寫 JS 也不例外。這些可以重復(fù)的框架代碼被稱作包（package）或者模塊（module），一個(gè)包可以是一個(gè)文件夾里放著幾個(gè)文件，同時(shí)有一個(gè)叫做?package.json?的文件。

一個(gè)網(wǎng)站里通常有幾十甚至上百個(gè) package，分散在各處，通常會(huì)將這些包按照各自的功能進(jìn)行劃分（類似我們安卓開發(fā)中的劃分子模塊），但是如果重復(fù)造一些輪子，不如上傳到一個(gè)公共平臺(tái)，讓更多的人一起使用、參與這個(gè)特定功能的模塊。

而 npm 的作用就是讓我們發(fā)布、下載一些 JS 輪子更加方便。

我們可以去官方網(wǎng)站?https://www.npmjs.com/?瀏覽、搜索想要的輪子，也可以直接在命令行中 search 一下意中輪。

使用 npm 后我們可以非常方便地查看依賴的輪子是否有更新、是否需要下載新版本。

現(xiàn)在我們知道 npm 是干什么的了。當(dāng)人們說起 “npm” 時(shí)，可能在說三個(gè)東西：

一個(gè)網(wǎng)站，就是前面提到用于搜索 JS 模塊的網(wǎng)站：https://www.npmjs.com/

一個(gè)倉庫，保存著人們分享的 JS 模塊的大數(shù)據(jù)庫

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

只要開發(fā)者發(fā)布某個(gè)模塊到倉庫中，其他人就可以從 npm 網(wǎng)站或者命令行中下載、使用它了！

安裝 npm

npm 是依附于 node.js 的，我們可以去它的官網(wǎng)?https://nodejs.org/en/download/?下載安裝 node.js。

下載好 node.js, npm 也就有了，使用?npm -v?查看安裝的 npm 版本：

zhangshixin$ node -v v6.10.0

• 1
• 2

更新 npm

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

npm install npm@latest -g

• 1

其中 install 不用介紹了，就是安裝，后面的?npm@latest?就是?<packageName>@<version>?的格式，我們?cè)谙螺d其他模塊時(shí)也是這個(gè)格式。-g?代表全局安裝。

package.json 文件

package.json?文件非常重要，因此需要單獨(dú)一小節(jié)介紹。

管理本地安裝 npm 包的最好方式就是創(chuàng)建?package.json?文件。

一個(gè)?package.json?文件可以有以下幾點(diǎn)作用：

作為一個(gè)描述文件，描述了你的項(xiàng)目依賴哪些包

允許我們使用 “語義化版本規(guī)則”（后面介紹）指明你項(xiàng)目依賴包的版本

讓你的構(gòu)建更好地與其他開發(fā)者分享，便于重復(fù)使用

package.json 如何創(chuàng)建

使用?npm init?即可在當(dāng)前目錄創(chuàng)建一個(gè)?package.json?文件：

如圖所示，輸入?npm init?后會(huì)彈出一堆問題，我們可以輸入對(duì)應(yīng)內(nèi)容，也可以使用默認(rèn)值。在回答一堆問題后輸入?yes?就會(huì)生成圖中所示內(nèi)容的?package.json?文件。

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

package.json 的內(nèi)容

package.json?文件至少要有兩部分內(nèi)容：

“name”?

• 全部小寫，沒有空格，可以使用下劃線或者橫線

“version”?

• x.x.x 的格式
• 符合“語義化版本規(guī)則”

比如：

{"name": "shixinzhang-demo-package","version": "1.0.0" }

• 1
• 2
• 3
• 4

其他內(nèi)容：

• description：描述信息，有助于搜索
• main: 入口文件，一般都是?index.js
• scripts：支持的腳本，默認(rèn)是一個(gè)空的 test
• keywords：關(guān)鍵字，有助于在人們使用?npm search?搜索時(shí)發(fā)現(xiàn)你的項(xiàng)目
• author：作者信息
• license：默認(rèn)是?MIT
• bugs：當(dāng)前項(xiàng)目的一些錯(cuò)誤信息，如果有的話

我們可以為?init?命令設(shè)置一些默認(rèn)值，比如：

> npm set init.author.email "shixinzhang2016@gmail.com" > npm set init.author.name "shixinzhang" > npm set init.license "MIT"

• 1
• 2
• 3

注意：?
如果 package.json 中沒有?description?信息，npm 使用項(xiàng)目中的 README.md 的第一行作為描述信息。這個(gè)描述信息有助于別人搜索你的項(xiàng)目，因此建議好好寫?description?信息。

指定依賴的包

我們需要在?package.json?文件中指定項(xiàng)目依賴的包，這樣別人在拿到這個(gè)項(xiàng)目時(shí)才可以使用?npm install?下載。

包有兩種依賴方式：

dependencies：在生產(chǎn)環(huán)境中需要用到的依賴

devDependencies：在開發(fā)、測試環(huán)境中用到的依賴

舉個(gè)例子：

{"name": "my-weex-demo","version": "1.0.0", "description": "a weex project", "main": "index.js", "scripts": { "build": "weex-builder src dist", "build_plugin": "webpack --config ./tools/webpack.config.plugin.js --color", "dev": "weex-builder src dist -w", "serve": "serve -p 8080" }, "keywords": [ "weex" ], "author": "fkysly@gmail.com", "license": "MIT", "devDependencies": { "babel-core": "^6.14.0", "babel-loader": "^6.2.5", "babel-preset-es2015": "^6.18.0", "vue-loader": "^10.0.2", "eslint": "^3.5.0", "serve": "^1.4.0", "webpack": "^1.13.2", "weex-loader": "^0.3.3", "weex-builder": "^0.2.6" }, "dependencies": { "weex-html5": "^0.3.2", "weex-components": "*" } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32

Semantic versioning（語義化版本規(guī)則）

https://docs.npmjs.com/getting-started/semantic-versioning

dependencies?的內(nèi)容，以?"weex-html5": "^0.3.2"?為例，我們知道 key 是依賴的包名稱，value 是這個(gè)包的版本。那版本前面的 ^ 或者版本直接是一個(gè) * 是什么意思呢？

這就是 npm 的 “Semantic versioning”，簡稱”Semver”，中文含義即“語義化版本規(guī)則”。

在安卓開發(fā)中我們有過這樣的經(jīng)驗(yàn)：有時(shí)候依賴的包升級(jí)后大改版，之前提供的接口不見了，這對(duì)使用者的項(xiàng)目可能造成極大的影響。

因此我們?cè)诼暶鲗?duì)某個(gè)包的依賴時(shí)需要指明是否允許 update 到新版本，什么情況下允許更新。

這就需要先了解 npm 包提供者應(yīng)該注意的版本號(hào)規(guī)范。

如果一個(gè)項(xiàng)目打算與別人分享，應(yīng)該從 1.0.0 版本開始。以后要升級(jí)版本應(yīng)該遵循以下標(biāo)準(zhǔn)：

• 補(bǔ)丁版本：解決了 Bug 或者一些較小的更改，增加最后一位數(shù)字，比如 1.0.1
• 小版本：增加了新特性，同時(shí)不會(huì)影響之前的版本，增加中間一位數(shù)字，比如 1.1.0
• 大版本：大改版，無法兼容之前的，增加第一位數(shù)字，比如 2.0.0

了解了提供者的版本規(guī)范后， npm 包使用者就可以針對(duì)自己的需要填寫依賴包的版本規(guī)則。

作為使用者，我們可以在?package.json?文件中寫明我們可以接受這個(gè)包的更新程度（假設(shè)當(dāng)前依賴的是 1.0.4 版本）：

• 如果只打算接受補(bǔ)丁版本的更新（也就是最后一位的改變），就可以這么寫：?
  
  • 1.0
  • 1.0.x
  • ~1.0.4
• 如果接受小版本的更新（第二位的改變），就可以這么寫：?
  
  • 1
  • 1.x
  • ^1.0.4
• 如果可以接受大版本的更新（自然接受小版本和補(bǔ)丁版本的改變），就可以這么寫：?
  
  • *
  • x

小結(jié)一下：總共三種版本變化類型，接受依賴包哪種類型的更新，就把版本號(hào)準(zhǔn)確寫到前一位。

安裝 package

使用 npm 安裝 package 有兩種方式：本地（當(dāng)前項(xiàng)目路徑）安裝 或者 全局安裝。

你選擇哪種安裝方式取決于你將如何使用這個(gè)包：

• 如果你只是想在當(dāng)前項(xiàng)目里用?require()?加載使用，那你可以安裝到本地?
  
  • npm install?默認(rèn)就是安裝到本地的
• 如果你想要在命令行里直接使用，比如?grunt?CLI，就需要安裝到全局了

如果在你的項(xiàng)目里有?package.json?文件，運(yùn)行?npm install?后它會(huì)查找文件中列出的依賴包，然后下載符合語義化版本規(guī)則的版本。

npm install?默認(rèn)會(huì)安裝?package.json?中?dependencies?和?devDependencies?里的所有模塊。

如果想只安裝?dependencies?中的內(nèi)容，可以使用?--production?字段：

npm install --production

• 1

本地安裝 package

npm 使用下面的命令下載一個(gè)包：

npm install <package_name>

• 1

后面就是要安裝包的名稱。這個(gè)命令會(huì)在當(dāng)前目錄創(chuàng)建一個(gè)?node_modules?目錄，然后下載我們指定的包到這個(gè)目錄中。

舉個(gè)例子：

zhangshixindeMacBook-Pro:publish-pkg zhangshixin$ npm install lodash zhangshixindeMacBook-Pro:publish-pkg zhangshixin$ ls index.js package-lock.json node_modules package.json zhangshixindeMacBook-Pro:publish-pkg zhangshixin$ ls node_modules/ lodash

• 1
• 2
• 3
• 4
• 5
• 6

下載后的項(xiàng)目文件夾：

安裝指定版本：

npm install?默認(rèn)安裝最新版本，如果想要安裝指定版本，可以在庫名稱后加?@版本號(hào)：

$ npm install sax@latest $ npm install sax@0.1.1 $ npm install sax@">=0.1.0 <0.2.0"

• 1
• 2
• 3

如果當(dāng)前項(xiàng)目有?package.json?文件，下載包時(shí)會(huì)下載這個(gè)文件中指定的版本；?
如果當(dāng)前項(xiàng)目中沒有?package.json?文件，就會(huì)下載指定包的最新版本。

有時(shí)下載會(huì)報(bào)錯(cuò)：npm install error saveError ENOENT: no such file or directory, open '/Users/zhangshixin/package.json'

解決辦法：?
- 在目錄下執(zhí)行?npm init?創(chuàng)建?package.json，輸入初始化信息?
- 然后再執(zhí)行下載命令

安裝參數(shù)?--save?和?--save -dev

添加依賴時(shí)我們可以手動(dòng)修改?package.json?文件，添加或者修改?dependencies?devDependencies?中的內(nèi)容即可。

另一種更酷的方式是用命令行，在使用?npm install?時(shí)增加?--save?或者?--save -dev?后綴：

• npm install <package_name> --save?表示將這個(gè)包名及對(duì)應(yīng)的版本添加到?package.json的?dependencies
• npm install <package_name> --save-dev?表示將這個(gè)包名及對(duì)應(yīng)的版本添加到?package.json的?devDependencies

使用下載好的包

下載后?node_modules?文件夾中有要使用的包，我們就可以使用其中的代碼了。

比如在 Node.js 項(xiàng)目中，我們可以用?require(XXX)?引入它。

舉個(gè)例子：?
創(chuàng)建一個(gè) index.js 文件，寫入如下代碼：

在使用?require('lodash')?后引入了 lodash 庫，然后調(diào)用了它的?without()?方法，這個(gè)方法可以去除第一個(gè)數(shù)組參數(shù)中與第二個(gè)參數(shù)重復(fù)的數(shù)據(jù)。

保存這個(gè)文件后，使用?node index.js?運(yùn)行這個(gè)文件，成功的話就可以得到運(yùn)行結(jié)果；如果之前安裝失敗，可能就會(huì)遇到這個(gè)錯(cuò)誤：

module.js:340throw err;^ Error: Cannot find module 'lodash'

• 1
• 2
• 3
• 4

這時(shí)你需要在這個(gè)目錄下重新運(yùn)行?npm install lodash?安裝。

更新本地 package

有時(shí)候我們想知道依賴的包是否有新版本，可以使用?npm outdated?查看，如果發(fā)現(xiàn)有的包有新版本，就可以使用?npm update <package-name>?更新它，或者直接?npm update?更新所有：

上圖中，我們?cè)谳斎?npm update?后發(fā)現(xiàn)本地的?lodash?模塊還不是最新的，這是為什么呢？

原來，npm update 的工作過程是這樣的：

先到遠(yuǎn)程倉庫查詢最新版本

然后對(duì)比本地版本，如果本地版本不存在，或者遠(yuǎn)程版本較新

查看?package.json?中對(duì)應(yīng)的語義版本規(guī)則

如果當(dāng)前新版本符合語義規(guī)則，就更新，否則不更新

一開始我本地的 package.json 的依賴是這樣的：

"dependencies": {"lodash": "^3.1.0"}

• 1
• 2
• 3

根據(jù)前面的介紹我們可以知道，這表示只接受小版本或者補(bǔ)丁版本的更新，因此在執(zhí)行了一次?npm update?后它變成了這樣：

"dependencies": {"lodash": "^3.10.1"}

• 1
• 2
• 3

第二位升到了最高，但是無法更新第一位，因此無法更新到最新的 4.17.4。

所以我需要把它修改成：

"dependencies": {"lodash": "*"}

• 1
• 2
• 3

這表示任何版本的更新都接受，然后再執(zhí)行?npm update，就發(fā)現(xiàn)更新成功了：

小結(jié)一下：

執(zhí)行?npm outdated?后可以看到有三個(gè)版本號(hào)：

第一個(gè)是當(dāng)前 node_modules 中該模塊的版本，第二個(gè)是?package.json?文件中聲明的版本，第三個(gè)是遠(yuǎn)程倉庫最新的版本。

只有當(dāng)前模塊版本低于遠(yuǎn)程，package.json 中的版本語義規(guī)則滿足情況，才能更新成功。

卸載本地 package

卸載一個(gè)本地 package 很簡單，npm uninstall <package-name>?即可：

官方文檔說輸入?npm uninstall --save lodash?才能在刪除項(xiàng)目的同時(shí)移除?package.json?中對(duì)它的依賴。但我沒加?--save?也達(dá)到了一樣的效果，一臉懵逼。

卸載后再?ls node_modules/?查看目錄下，發(fā)現(xiàn)沒有東西，刪除成功。

全局安裝 package

如果你想要直接在命令行中使用某個(gè)包，比如?jshint?，你可以全局安裝它。

全局安裝比本地安裝多了個(gè)?-g:

npm install -g <package-name>

• 1

以?jshint?為例，全局安裝命令是：

npm install -g jshint

• 1

安裝后可以使用?npm ls -g --depth=0?查看安裝在全局第一層的包。

全局安裝的權(quán)限問題

在全局安裝時(shí)可能會(huì)遇到?EACCES?權(quán)限問題，解決辦法辦法有如下 3 種：

1.sudo npm install -g jshint，使用?sudo?簡單粗暴，但是治標(biāo)不治本

2.修改 npm 全局默認(rèn)目錄的權(quán)限

先獲取 npm 全局目錄：npm config get prefix，一般都是?/usr/local；?
然后修改這個(gè)目錄權(quán)限為當(dāng)前用戶：

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

• 1

3.使用其他包管理器幫你解決這個(gè)問題

實(shí)在懶得弄可以直接卸載 node，然后使用 Homebrew 重裝 node:

brew install node

• 1

Homebrew 會(huì)幫我們處理好權(quán)限的問題。

更新全局的 package

想知道哪些包需要更新，可以使用?npm outdated -g --depth=0，然后使用?npm update -g <package>更新指定的包：

要更新所有全局包，可以使用?npm update -g，可以發(fā)現(xiàn)對(duì)比本地的，只是多了個(gè)?-g。

不過官方說在 2.6.1 以下的 npm ，直接使用?npm update -g?并不安全，因?yàn)樗鼤?huì)遞歸地更新所有全局依賴。

這種情況下可以使用?npm-check?，貼一張它的截圖：

Github 地址：https://github.com/dylang/npm-check

卸載全局 package

一句搞定：npm uninstall -g <package>

其他命令

npm run

部分摘自?阮一峰的 NPM 教程

npm 還可以直接運(yùn)行?package.json?中?scripts?指定的腳本：

{"name": "demo","scripts": { "lint": "jshint **.js", "test": "mocha test/" } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7

npm run 是 npm run-script 的縮寫。

命令行輸入?npm run lint?或者?npm run-script lint?就會(huì)執(zhí)行?jshint **.js?。

npm run?會(huì)創(chuàng)建一個(gè)Shell，執(zhí)行指定的命令，并臨時(shí)將node_modules/.bin加入PATH 變量，這意味著本地模塊可以直接運(yùn)行。

package.json?中的?scripts?執(zhí)行的腳本是本地項(xiàng)目內(nèi)?node_modules?->?.bin?內(nèi)的腳本。

"scripts": {"build": "weex-builder src dist","build_plugin": "webpack --config ./tools/webpack.config.plugin.js --color", "dev": "weex-builder src dist -w", "serve": "serve -p 8080" }

• 1
• 2
• 3
• 4
• 5
• 6

直接運(yùn)行?npm run?會(huì)列出當(dāng)前項(xiàng)目的?package.json?中?scripts?屬性下的所有腳本命令。

npm install from github

npm install 也可以直接從 github 下載:

$ npm install git://github.com/package/path.git $ npm install git://github.com/package/path.git#0.1.0

• 1
• 2

npm info

npm info <package-name>?可以查看指定包的信息：

npm adduser

npm adduser?用于在npmjs.com注冊(cè)一個(gè)用戶:

$ npm adduser Username: YOUR_USER_NAME Password: YOUR_PASSWORD Email: YOUR_EMAIL@domain.com

• 1
• 2
• 3
• 4

npm home/repo

npm home <package-name>命令可以打開指定模塊的主頁；?
npm repo <package-name>命令則是打開指定模塊的代碼倉庫。

npm prune

prune 即“修剪”的意思。

npm prune?可以檢查出當(dāng)前項(xiàng)目的?node_modules目錄中，沒有在?package.json里提到的模塊。

npm publish

現(xiàn)在水平還不夠，等寫出可以復(fù)用的 JS 代碼后，我們就可以將它發(fā)布到 npm 倉庫上，類似 Github 的提交。

這部分主要摘自阮一峰的 NPM 教程

要想發(fā)布，首先需要使用?npm adduser向?npmjs.com申請(qǐng)用戶名（當(dāng)然去官網(wǎng)也可以）。

接著使用?npm login?在命令行中登錄。

登錄以后，就可以使用?npm publish命令發(fā)布。

$ npm publish

• 1
• 2

如果當(dāng)前模塊是一個(gè)beta版，比如1.3.1-beta.3，那么發(fā)布的時(shí)候需要使用tag參數(shù)，將其發(fā)布到指定標(biāo)簽，默認(rèn)的發(fā)布標(biāo)簽是latest。

$ npm publish --tag beta

• 1
• 2

如果發(fā)布私有模塊，模塊初始化的時(shí)候，需要加上scope參數(shù)。只有npm的付費(fèi)用戶才能發(fā)布私有模塊。

$ npm init --scope=<yourscope>

• 1
• 2

如果你的模塊是用ES6寫的，那么發(fā)布的時(shí)候，最好轉(zhuǎn)成ES5。首先，需要安裝Babel。

$ npm install --save-dev babel-cli@6 babel-preset-es2015@6

• 1
• 2

然后，在package.json里面寫入build腳本。

"scripts": {"build": "babel source --presets babel-preset-es2015 --out-dir distribution","prepublish": "npm run build" }

• 1
• 2
• 3
• 4
• 5

運(yùn)行上面的腳本，會(huì)將source目錄里面的ES6源碼文件，轉(zhuǎn)為distribution目錄里面的ES5源碼文件。

國內(nèi)鏡像

不翻的話有時(shí)候 npm 比較卡，可以使用國內(nèi)的淘寶鏡像 cnpm：?https://npm.taobao.org。

cnpm?支持?npm?除了?publish?之外的所有命令。

總結(jié)

經(jīng)過這么一番總結(jié)，總算可以說 npm 入門了。

接觸前端后發(fā)現(xiàn)這個(gè)圈子太復(fù)雜了，各種工具各種框架，眼花繚亂啊。一步一步來吧！

Thanks

https://docs.npmjs.com/?
http://javascript.ruanyifeng.com/nodejs/npm.html#

?

轉(zhuǎn)載于:https://www.cnblogs.com/bydzhangxiaowei/p/8729223.html

總結(jié)

以上是生活随笔為你收集整理的npm 与 package.json 快速入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。