NPM包管理器 | 乐趣区

NPM安装和定义

NPM（全称 Node Package Manager，即“node包管理器”）是Node.js默认的、以JavaScript编写的软件包管理系统。

以上是维基百科给NPM的定义。理解软件包管理系统。
软件包管理系统是在计算机中自动安装、配制、卸载和升级软件包的工具组合，在各种系统软件和应用软件的安装管理中均有广泛应用。
比如：PHP中composer、JAVA中maven、LIUNX系统中的yum

NPM软件包管理系统由3部分组成：

网站

可以通过https://www.npmjs.com网站,搜索包、管理自己的包和个人信息。

注册表（registry）

一个巨大的数据库，保存着每个包（package）的信息。

命令行工具 (CLI)

通过命令行和终端运行，开发者通过CLI与NPM打交道。

在安装Node.js时会默认安装NPM包管理器，NPM完全由Javascript写成，和模块没啥区别，所以我们可以npm install -g npm 更新安装自己。

随着前端工程化、模块化的快速发展，前端开发已经离不开npm包管理器了。在我们使用前端各大框架Vue、React、Angluar时，我们只需要npm install [package name]就可以安装使用我们需要的模块包，非常便捷高效。

通过下图我们就能看出npm之火爆。总包量100多万，周下载量114亿。来自各大洲的开源软件开发者都在使用npm借鉴学习或者分享。同时也是Node.js获得成功重要原因之一。

NPM命令以及使用

以上图片罗列出NPM所有的命令，捡几个常用的命令学习；

npm install 安装模块

安装形式：

npm install (with no args, in package dir)npm install [<@scope>/]<pkg>npm install [<@scope>/]<pkg>@<tag>npm install [<@scope>/]<pkg>@<version>npm install [<@scope>/]<pkg>@<version range>npm install <folder>npm install <tarball file>npm install <tarball url>npm install <git:// url>npm install <github username>/<github project>alias: i,addcommon options: [-S|--save|-D|--save-dev|-O|--save-optional] [-E|--save-exact][--no-save][-B|--save-bundle][--dry-run]

其中：
-S与--save 安装到dependenices生产环境中,对应package.json中的dependencies

//npm i -S ecpress || npm install --save express"dependencies": {    "express": "^4.17.1",}

-D与--save-dev 安装到devDependenices开发环境中,对应package.json中的devDependencies

//npm i -D ecpress || npm install --save-dev express"devDependencies": {    "express": "^4.17.1" }

-O与--save-optional 安装加入到可选阶段依赖对应package.json中的optionalDependencies

// npm i -O vue || npm install --save-optional"optionalDependenices":{    "vue": "^2.5.2"}

-E与--save-exact 精准安装指定模块版本对应package.json中的dependenicies不会是兼容的模式展示^

// npm i -E vue || npm install --save-exact 注意没有^"dependenices":{    "vue": "2.5.2"}

--no-save 防止保存到依赖项

-B与--save-bundle 保存的依赖项也将添加到您的bundleDependencies列表中。

"dependenices":{    "vue":"^2.5.2"},"bundleDependencies":["vue"]

--dry-run 只在命令行可以看到有安装的操作,实际没有安装任何内容到node_modules和package.json中

本地安装

npm i vue

全局安装

npm i -g vue || npm install --global vue

即使本地已经下载，强制从远程下载安装

npm i -f vue || npm install --force vue

npm uninstall 卸载模块

npm uninstall [<@scope>/]<pkg>[@<version>]... [-S|--save-prod][-D|--save-dev][-O|--save-optional] [--no-save]aliases: un, unlink, remove, rm, r

npm uninstall -g vue //卸载全局包npm uninstall vue // 卸载本地包

npm search 搜索模块

npm search [-l|--long] [--json] [--parseable] [--no-description] [search terms ...]aliases: s, se, find

npm update 更新模块

npm update [-g] [<pkg>...]aliases: up, upgrade, udpate

npm outdated 检查模块是否过时

npm outdated [[<@scope>/]<pkg> ...]

npm ls 查看安装模块

npm ls [[<@scope>/]<pkg> ...]aliases: list, la, ll

npm init 初始化生成package.json文件

npm init [--force|-f|--yes|-y|--scope]npm init <@scope> (same as `npx <@scope>/create`)npm init [<@scope>/]<name> (same as `npx [<@scope>/]create-<name>`)

默认init 跳过提示步骤

npm init -y || npm init -yes

安装react应用到my-react-app目录下

npm init react-app ./my-react-app

init 转成npx对应操作

npm init foo -> npx create-foonpm init @usr/foo -> npx @usr/create-foonpm init @usr -> npx @usr/create

npm help <term> || npm <command> -h查看命令帮助

npm help installnpm help initnpm install -h || npm install --help

npm root 查看包安装路径

npm root# 查看全局安装路径npm root -g

npm config 管理npm配置项

npm config set <key> <value> [-g|--global]npm config get <key>npm config delete <key>npm config list [-l] [--json]npm config editnpm get <key>npm set <key> <value> [-g|--global]aliases: c

基本配置

npm config list; cli configsmetrics-registry = "https://registry.npmjs.org/"scope = ""user-agent = "npm/6.4.1 node/v10.15.3 darwin x64"; userconfig /Users/ducen/.npmrc//registry.npm.taobao.org/:always-auth = falseinit.author.email = "123@.qq.com"registry = "https://registry.npmjs.org/"; node bin location = /usr/local/bin/node; cwd = /Users/ducen/Learn/npm; HOME = /Users/ducen; "npm config ls -l" to show all defaults.

npm cache 管理模块缓存

npm cache add <tarball file>npm cache add <folder>npm cache add <tarball url>npm cache add <name>@<version>npm cache clean [<path>]aliases: npm cache clear, npm cache rmnpm cache verify

默认缓存位置mac~/.npm window %AppData%/npm-cache
最常用的是清除本地缓存

npm cache clean

npm version 查看模块版本

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]

npm version{ npm: '6.4.1',  ares: '1.15.0',  cldr: '33.1',  http_parser: '2.8.0',  icu: '62.1',  modules: '64',  napi: '3',  nghttp2: '1.34.0',  node: '10.15.3',  openssl: '1.1.0j',  tz: '2018e',  unicode: '11.0',  uv: '1.23.2',  v8: '6.8.275.32-node.51',  zlib: '1.2.11' }

npm view 查看模块注册信息

npm view [<@scope>/]<name>[@<version>] [<field>[.<subfield>]...]aliases: info, show, v

npm view vuevue@2.6.10 | MIT | deps: none | versions: 250Reactive, component-oriented view layer for modern web interfaces.https://github.com/vuejs/vue#readmekeywords: vuedist.tarball: https://registry.npmjs.org/vue/-/vue-2.6.10.tgz.shasum: a72b1a42a4d82a721ea438d1b6bf55e66195c637.integrity: sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==.unpackedSize: 3.0 MBmaintainers:- yyx990803 <yyx990803@gmail.com>dist-tags:beta: 2.6.0-beta.3  csp: 1.0.28-csp     latest: 2.6.10published 3 months ago by yyx990803 <yyx990803@gmail.com>

npm view <pkg> dependencies查看模块的依赖关系

npm view express dependecies{     accepts: '~1.3.7',  'array-flatten': '1.1.1',  'body-parser': '1.19.0',  'content-disposition': '0.5.3',  'content-type': '~1.0.4',  cookie: '0.4.0',  'cookie-signature': '1.0.6',  debug: '2.6.9',  depd: '~1.1.2',  encodeurl: '~1.0.2',  'escape-html': '~1.0.3',  etag: '~1.8.1',  finalhandler: '~1.1.2',  fresh: '0.5.2',  'merge-descriptors': '1.0.1',  methods: '~1.1.2',  'on-finished': '~2.3.0',  parseurl: '~1.3.3',  'path-to-regexp': '0.1.7',  'proxy-addr': '~2.0.5',  qs: '6.7.0',  'range-parser': '~1.2.1',  'safe-buffer': '5.1.2',  send: '0.17.1',  'serve-static': '1.14.1',  setprototypeof: '1.1.1',  statuses: '~1.5.0',  'type-is': '~1.6.18',  'utils-merge': '1.0.1',  vary: '~1.1.2'   }

npm view <pkg> repository.url 查看源文件地址

npm view qs repository.urlgit+https://github.com/ljharb/qs.git

npm view <pkg> contributors 查看模块的贡献值

npm view express contributors[ 'Aaron Heckmann <aaron.heckmann+github@gmail.com>',  'Ciaran Jessup <ciaranj@gmail.com>',  'Douglas Christopher Wilson <doug@somethingdoug.com>',  'Guillermo Rauch <rauchg@gmail.com>',  'Jonathan Ong <me@jongleberry.com>',  'Roman Shtylman <shtylman+expressjs@gmail.com>',  'Young Jae Sim <hanul@hanul.me>' ]

npm adduser 用户登录

npm adduser [--registry=url] [--scope=@orgname] [--always-auth] [--auth-type=legacy]aliases: login, add-user

npm adduserUsername: alan-duPassword:Email: (this IS public) 316358726@qq.comLogged in as alan-du on https://registry.npmjs.org/.

用户登录后，可以向npm发送包。

npm publish 发布模块

npm publish [<tarball>|<folder>] [--tag <tag>] [--access <public|restricted>] [--otp otpcode] [--dry-run]Publishes '.' if no argument suppliedSets tag 'latest' if no --tag specified

简单发一个包

#1mkdir alan-npm-test#2cd alan-npm-test#3npm init -y#4touch index.js#5echo "function(){console.log('这是发布的测试包')}()">index.js#6npm adduserUsername: alan-duPassword:Email: (this IS public) 316358726@qq.comLogged in as alan-du on https://registry.npmjs.org/.#7npm publishnpm noticenpm notice ????  alan-npm-test@1.0.0npm notice === Tarball Contents ===npm notice 227B package.jsonnpm notice 58B  index.jsnpm notice === Tarball Details ===npm notice name:          alan-npm-testnpm notice version:       1.0.0npm notice package size:  353 Bnpm notice unpacked size: 285 Bnpm notice shasum:        4c84a14ed93f4e1e6d2a603da3e70868f71035e4npm notice integrity:     sha512-IgzS/4dB/vFVD[...]lzv4Fq4Pw2rnA==npm notice total files:   2npm notice+ alan-npm-test@1.0.0

npm dist-tag 添加删除查看tag

npm dist-tag add <pkg>@<version> [<tag>]npm dist-tag rm <pkg> <tag>npm dist-tag ls [<pkg>]aliases: dist-tags

#1npm dist-tag lsalan-npm-test@1.0.2-0: 1.0.2-0latest: 1.0.3-1npm-test@1.0.5: 1.0.5#2npm dist-tag rm alan-npm-test alan-npm-test@1.0.2-0-alan-npm-test@1.0.2-0: alan-npm-test@1.0.2-0

npm deprecate 弃用包

npm deprecate <pkg>[@<version>] <message>

npm deprecate alan-npm-test@1.0.3-1 "this package has been deprecated"

<message>不能为汉字等特殊字符

npm unpublish撤销发布的包

删除某个版本

npm unpublish alan-npm-test@1.0.5

删除整个npm市场的包

npm unpublish alan-npm-test --force

24小时内你可以删除自己发布的库，并且没有被下载，之后你就再也不能删除了。

package.json 介绍

{  "name": "express",  "description": "Fast, unopinionated, minimalist web framework",  "version": "4.17.1",  "author": "TJ Holowaychuk <tj@vision-media.ca>",  "contributors": [    "Aaron Heckmann <aaron.heckmann+github@gmail.com>",    "Ciaran Jessup <ciaranj@gmail.com>",    "Douglas Christopher Wilson <doug@somethingdoug.com>",    "Guillermo Rauch <rauchg@gmail.com>",    "Jonathan Ong <me@jongleberry.com>",    "Roman Shtylman <shtylman+expressjs@gmail.com>",    "Young Jae Sim <hanul@hanul.me>"  ],  "license": "MIT",  "repository": "expressjs/express",  "homepage": "http://expressjs.com/",  "keywords": [    "express",    "framework",    "sinatra",    "web",    "rest",    "restful",    "router",    "app",    "api"  ],  "dependencies": {    "accepts": "~1.3.7",    "array-flatten": "1.1.1",         ...  },  "devDependencies": {    "after": "0.8.2",    "connect-redis": "3.4.1",       ...  },  "engines": {    "node": ">= 0.10.0"  },  "files": [    "LICENSE",    "History.md",    "Readme.md",    "index.js",    "lib/"  ],  "scripts": {    "lint": "eslint .",    "test": "mocha --require test/support/env --reporter spec --bail --check-leaks test/ test/acceptance/",    "test-ci": "istanbul cover node_modules/mocha/bin/_mocha --report lcovonly -- --require test/support/env --reporter spec --check-leaks test/ test/acceptance/",    "test-cov": "istanbul cover node_modules/mocha/bin/_mocha -- --require test/support/env --reporter dot --check-leaks test/ test/acceptance/",    "test-tap": "mocha --require test/support/env --reporter tap --check-leaks test/ test/acceptance/"  }}

name

在package.json中最重要的就是name和version字段。他们都是必须的，如果没有就无法install。name和version一起组成的标识在假设中是唯一的。改变包应该同时改变version。

version

version必须能被node-semver解析，它被包在npm的依赖中。（要自己用可以执行npm install semver）
可用的“数字”或者“范围”见下文语义化版本控制范围SemVer.

description

放简介，字符串，方便在npm search中搜索

keywords

关键字，数组、字符串，方便在npm search中搜索

bugs

项目提交问题的url和（或）邮件地址

"bugs": {    "url": "https://github.com/vuejs/vue/issues" }

license

指定一个许可证，让人知道使用的权利和限制的。
最简单的方法是，假如你用一个像BSD或者MIT这样通用的许可证，就只需要指定一个许可证的名字，像这样：

"license": "MIT",

如果你又更复杂的许可条件，或者想要提供给更多地细节，可以这样:

"licenses" : [  {    "type" : "MyLicense",    "url" : "http://github.com/owner/project/path/to/license"  }]

repository

指定你的代码存放的地方。这个对希望贡献的人有帮助。如果git仓库在github上，那么npm docs命令能找到你。
这样做：

 "repository": {    "type": "git",    "url": "git+https://github.com/vuejs/vue.git"  },

URL应该是公开的（即便是只读的）能直接被未经过修改的版本控制程序处理的url。不应该是一个html的项目页面。因为它是给计算机看的。

scripts

“scripts”是一个由脚本命令组成的hash对象，他们在包不同的生命周期中被执行。key是生命周期事件，value是要运行的命令。

"scripts": {    "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",        ... },

更多详细请看 npm-scripts(7)

config

"config": {    "commitizen": {      "path": "./node_modules/cz-conventional-changelog"    } }

config对象可用于设置在升级过程中持久存在的程序包脚本中使用的配置参数。例如，如果包具有以下内容：

dependencies

生产依赖包，请不要将测试或过渡性的依赖放在dependencies中。

"dependencies": {    "accepts": "~1.3.7",    "array-flatten": "1.1.1",         ... },

devDependencies

开发依赖包，如果有人要使用你的模块，那么他们可能不需要你开发使用的外部测试或者文档框架。
在这种情况下，最好将这些附属的项目列在devDependencies中。

"devDependencies": {    "after": "0.8.2",    "connect-redis": "3.4.1",       ... },

语义化版本控制规范（SemVer）Semantic Versioning

SemVer规则

版本格式：主版本号.次版本号.修订号，版本号递增规则如下：

主版本号：当你做了不兼容的 API 修改;
次版本号：当你做了向下兼容的功能性新增;
修订号：当你做了向下兼容的问题修正;

先行版本号及版本编译元数据可以加到“主版本号.次版本号.修订号”的后面，作为延伸。
当主版本号升级后，次版本号和修订号需要重置为0，次版本号进行升级后，修订版本需要重置为0。

SemVer 两个概念

固定版本：是指例如 0.4.1、1.2.7、1.2.4-beta.0 这样表示包的特定版本的字符串；
范围版本：是对满足特定规则的版本的一种表示，例如 1.2.3-2.3.4、1.x、^0.2、>1.4；

先行版本（Pre-release Version）

先行版本号可以作为发布正式版之前的版本，格式是在修订版本号后面加上一个连接号（-），再加上一连串以点（.）分割的标识符，标识符可以由英文、数字和连接号（[0-9A-Za-z-]）组成。

1.0.0-alpha1.0.0-alpha.11.0.0-0.3.71.0.0-x.7.z.92

常见的先行版本号名称：

alpha：是内部测试版,一般不向外部发布,会有很多Bug.一般只有测试人员使用;
beta：也是测试版，这个阶段的版本会一直加入新的功能。在Alpha版之后推出;
rc：Release　Candidate) 系统平台上就是发行候选版本。RC版不会再加入新的功能了，主要着重于除错;

依赖规则

npm依赖的规则，有^、~、>、<、=、>=、<=、-、||、x、X、* 等符号；

**^**：表示同一主版本号，不小于当前指定版本号的版本好号。

dependencies:{    vue:"^2.6.2" }// npm install 安装最新依赖，会下载2.6.3、2.7.1 不会下载2.6.1、3.0.0

~ ：表示同一主版本号和次版本号中，不小于指定版本号的版本号。

dependencies:{    vue:"~2.6.2" }// npm install 安装最新依赖，会下载2.6.3、2.6.6 不会下载2.6.1 2.7.0

<、=、>=、<=、-：用来指定一个版本号范围。

dependencies:{    vue:">2.6.2", },"engines": {  node: ">= 0.10.0"},//`1.1.1 - 1.2.0`//注意使用 `-` 的时候，必须两边都有空格。

||：表示或

dependencies:{    vue:"<2.6.2 || >2.5.1", },

x、X、*：表示通配符

dependencies:{    qs:"*",  vue:"2.x"},//`*` 对应所有版本号//`2.x` 对应所有主版本号为 2 的版本号

npm常用命令详解
一分钟教你发布一个npm包
NPM模块的TAG管理
package.json英文文档
package.json中文文档
Semver 中文网
Semver 语义化版本规范