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,add
common 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-foo
npm init @usr/foo -> npx @usr/create-foo
npm init @usr -> npx @usr/create

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

npm help install
npm help init
npm 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 edit
npm get <key>
npm set <key> <value> [-g|--global]
 
aliases: c

基本配置

npm config list
; cli configs
metrics-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 = false
init.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 rm
 
npm 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 vue
vue@2.6.10 | MIT | deps: none | versions: 250
Reactive, component-oriented view layer for modern web interfaces.
https://github.com/vuejs/vue#readme
 
keywords: vue
 
dist
.tarball: https://registry.npmjs.org/vue/-/vue-2.6.10.tgz
.shasum: a72b1a42a4d82a721ea438d1b6bf55e66195c637
.integrity: sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==
.unpackedSize: 3.0 MB
 
maintainers:
- yyx990803 <yyx990803@gmail.com>
 
dist-tags:
beta: 2.6.0-beta.3  csp: 1.0.28-csp     latest: 2.6.10
 
published 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.url
git+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 adduser
Username: alan-du
Password:
Email: (this IS public) 316358726@qq.com
Logged 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 supplied
Sets tag 'latest' if no --tag specified

简单发一个包

#1
mkdir alan-npm-test
#2
cd alan-npm-test
#3
npm init -y
#4
touch index.js
#5
echo "function(){console.log(' 这是发布的测试包 ')}()">index.js
#6
npm adduser
Username: alan-du
Password:
Email: (this IS public) 316358726@qq.com
Logged in as alan-du on https://registry.npmjs.org/.
#7
npm publish
npm notice
npm notice ????  alan-npm-test@1.0.0
npm notice === Tarball Contents ===
npm notice 227B package.json
npm notice 58B  index.js
npm notice === Tarball Details ===
npm notice name:          alan-npm-test
npm notice version:       1.0.0
npm notice package size:  353 B
npm notice unpacked size: 285 B
npm notice shasum:        4c84a14ed93f4e1e6d2a603da3e70868f71035e4
npm notice integrity:     sha512-IgzS/4dB/vFVD[...]lzv4Fq4Pw2rnA==
npm notice total files:   2
npm 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

#1
npm dist-tag ls
alan-npm-test@1.0.2-0: 1.0.2-0
latest: 1.0.3-1
npm-test@1.0.5: 1.0.5
#2
npm 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 规则

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

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

先行版本号及版本编译元数据可以加到“主版本号. 次版本号. 修订号”的后面，作为延伸。
当主版本号升级后，次版本号和修订号需要重置为 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-alpha
1.0.0-alpha.1
1.0.0-0.3.7
1.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 语义化版本规范