“技术改变世界，代码改变未来”

大家好，我是静心悦纳。

npm是一款JavaScript包管理器（JavaScript Package Manager）,同类的工具还有yarn。

npm是一个客户端工具，它需要在客户端安装并执行，但需要软件包注册管理服务的支持。

使用npm首先我们需要知道怎么安装。实际上，安装npm只需要安装NodeJs就可以，NodeJs的安装包中已经包含了npm工具。关于NodeJs的安装也很简单。只需要从NodeJs网站下载相应操作系统的安装包，执行并按提示安装即可。安装完成后，你就可以使用npm命令了。值得一提的是，我们在选择NodeJs版本的时候，如果没有特殊的要求，尽量选择成熟的稳定版本和长期维护版本。

首先，让我们先查看一下npm的版本。

$ npm -v
8.19.1

通过npm工具，也可以创建一个NodeJs项目。

$ mkdir demo
$ cd demo
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.See `npm help init` for definitive documentation on these fields
and exactly what they do.Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.Press ^C at any time to quit.
package name: (demo)
version: (1.0.0)
description: this is a demo project
entry point: (index.js)
test command:
git repository:
keywords: demo
author: jinxinyuena
license: (ISC) MIT
About to write to /Users/popgis/tmp/npm/demo/package.json:{"name": "demo","version": "1.0.0","description": "this is a demo project","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": ["demo"],"author": "jinxinyuena","license": "MIT"
}Is this OK? (yes)
npm notice
npm notice New patch version of npm available! 8.19.1 -> 8.19.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.19.2
npm notice Run npm install -g npm@8.

执行npm init后，按照提示逐步执行，这样我们就创建了一个NodeJs的demo工程。
在demo目录下还生成了一个package.json文件，其内容如下所示：

{"name": "demo","version": "1.0.0","description": "this is a demo project","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": ["demo"],"author": "jinxinyuena","license": "MIT"
}

有了package.json只是有了一个项目基本配置，此时你可以使用npm命令安装并使用第三方的依赖包。即使用npm install命令进行安装。如，可以通过inquirer创建一个交互式的命令行工具。

安装或反安装依赖库

接下来，我们就可以安装依赖库了，下面我就以inquirer依赖库为例，介绍npm包的安装方法。

npm install --save inquirer

执行上述命令后，package.json文件中就多出了如下行：

  "dependencies": {"inquirer": "^9.1.1"}

安装命令的install也可以替换为以下关键字：

add, i, in, ins, inst, insta, instal, isnt, isnta, isntal, isntall

例如，上述命令可以简化为：

npm i --save inquirer

--save意思是将依赖包的信息保存于package.json配置文件中，它是一个默认选项，通常情况下是不需要输入的。

{"name": "demo","version": "1.0.0","description": "this is a demo project","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": ["demo"],"author": "jinxinyuena","license": "MIT","dependencies": {"inquirer": "^9.1.1"}
}

其中，以下内容是新增的保存内容：

 "dependencies": {"inquirer": "^9.1.1"}

inquirer依赖包被加在了dependencies中，需要注意的是dependencies中的依赖包在运行时需要的库，但如果只是在编译时需要的依赖库，如，webpack等，则不需要加在dependencies中，你需要将其加入到devDependencies中，方法就是只需要将--save参数改为--save-dev即可。

 $ npm i --save-dev webpack
added 76 packages in 3s

当执行完成npm install之后，在package.json同级目录下会多出一个文件夹node_modules，还有一个package-lock.json文件。

$ tree -L 1
.
├── node_modules
├── package-lock.json
└── package.json1 directory, 2 files

node_modules目录下放置的是所有的依赖库。package-lock.json是自动生成的，你不应当手工去编辑它，它是用来详细、准确记录依赖库信息、依赖版本、依赖顺序等的文件。

为了保证依赖库资源的稳定性，你应该将package-lock.json连同package.json一并提交至代码仓库中。有了package.json与package-lock.json，你不需要把node_moduels目录及其下文件提交至代码仓库。

如果想要反安装依赖库，则可以使用npm uninstall命令。如，反安装inquirer，则可以按如下方法执行：

$ npm uninstall inquirer
removed 47 packages in 1s

执行上述命令后，inquirer依赖库会被从package.json文件中移除，当然，也会被从node_moduels目录下移除。

下面的几条命令是与前面的命令执行效果是相同的：

npm un inquirer
npm r inquirer
npm remove inquirer
npm unlink inquirer

查看npm项目中有哪些依赖库

安装完依赖包以后，你可以还想查看一下当前项目中还依赖了哪些库，则可以通过npm list来查看。

$ npm list
demo@2.0.0 /Users/popgis/tmp/npm/demo
├── inquirer@9.1.1
└── webpack@5.74.0

list命令可以简写为ls。

$ npm ls
demo@2.0.0 /Users/popgis/tmp/npm/demo
├── inquirer@9.1.1
└── webpack@5.74.0

使用npm管理与配置项目版本

你可能已经注意到了在package.json文件中包含以下信息：

"version": "1.0.0",

1.0.0就是当前项目的版本号。
我们知道，一般一个软件的版本号主要分为三段：

主版本号
次版本号
补丁版本号

当你为项目增加了新的主功能或进行了重大代码重构后，一般你需要增加主版本号（major），当你只是增加了次要功能或是小范围的重构，一般需要升级是次版本号（minor），如果只是修改了一些Bug或添加了补丁，则一般只需要升级补丁版本（patch）。

执行如下命令，可以升级次版本：

$ npm version minor
v1.1.0

同样地，执行如下版本可以升级补丁版本：

 $ npm version patch
v1.1.1

类似地，执行如下命令，可以升级主版本：

npm version major
v2.0.0

如果npm version后什么都不加，则可以列出所有直接依赖或间接依赖的库及其版本号。

$ npm version
{demo: '2.0.0',npm: '8.19.1',node: '16.13.0',v8: '9.4.146.19-node.13',uv: '1.42.0',zlib: '1.2.11',brotli: '1.0.9',ares: '1.17.2',modules: '93',nghttp2: '1.45.1',napi: '8',llhttp: '6.0.4',openssl: '1.1.1l+quic',cldr: '39.0',icu: '69.1',tz: '2021a',unicode: '13.0',ngtcp2: '0.1.0-DEV',nghttp3: '0.1.0-DEV'
}

还有哪些命令可用？

除了init、install、uninstall、ll、version外，npm命令还有很多，以下是所有的命令列表：

npm access 设置发布包的访问级别
npm adduser 增加一个注册用户帐号
npm audit 执行安全检查
npm bin 显示npm的bin文件夹
npm bugs 在Web浏览器中显示包的Bug报告，如，npm bugs webpack
npm cache 操作npm包缓存
npm ci 清理安装一个项目，常常用于测试平台、持续集成与生产环境部署时
npm completion 使能npm自动完成功能
npm config 通过命令管理npm配置文件（package.json）
npm dedupe 减少包树中的重复依赖
npm deprecate 废弃包的版本
npm diff 比较包的差异
npm dist-tag 修改包的分发标签
npm docs 在Web浏览器中打开包的文档，如，npm docs webpack
npm doctor 检查npm环境
npm edit 编辑安装的包
npm exec 从本地或远程npm包运行一个命令
npm explain 解释已安装的包
npm explore 浏览已安装的包
npm find-dupes 在包依赖树中查找重复的包
npm fund 获取从哪儿找包的信息
npm get 获取配置信息
npm help 查看命令帮助信息
npm hook 管理注册钩子，包含add、ls、rm、update等子命令
npm init 创建package.json文件
npm install 安装包
npm install-ci-test 运行npm ci后，立即运行npm test
npm install-test 安装包并运行测试
npm link 符号链接包文件夹，多用于本地调试
npm ll 列示已安装的包，包含描述信息等
npm login 增加一个注册用户帐号，同npm adduser
npm logout 退出登录
npm ls 查已安装的包列表，同npm list
npm org 管理组织
npm outdated 检查过期的包
npm owner 管理包的属主，包含add、rm、ls子命令
npm pack 创建压缩包
npm ping 检查注册器是否可用
npm pkg 管理package.json文件，包含set、get、delete等子命令
npm prefix 显示本地路径前缀
npm profile 修改注册身份信息，包含get、set、enable-2fa、disable-2fa等子命令
npm prune 移除多余的包
npm publish 发布包
npm query 通过选择器过滤查询依赖
npm rebuild 重建包
npm repo 在浏览器中打开包库页面
npm restart 重启项目
npm root 显示npm包根目录
npm run-script 运行scripts中的任意脚本
npm search 搜索包，同find, s, se
npm set 修改npm配置
npm set-script 在package.json的scripts节中设置任务
npm shrinkwrap 锁定发布的依赖项版本
npm star 标记喜欢的包
npm stars 查看喜欢的包
npm start 启动项目
npm stop 停止项目
npm team 管理团队和成员
npm test 测试包
npm token 管理授权令牌
npm uninstall 卸载包
npm unpublish 从注册器移除发布的包
npm unstar 从喜欢的包中移除一项
npm update 升级包
npm version 升级或更新包版本
npm view 查看项目对应的注册器信息
npm whoami 显示npm用户

不会可以直接寻求帮助

就像Linux系统的man命令一样，你可以通过npm的help子命令，查询相应子命令的帮助。
比如，想要看一下diff命令是做什么的，或者想要知道如何使用diff，则可以使用如下命令查看。

$ npm help diff

进入到帮助文档浏览模式后，可以通过键盘上的向下键或者回车键逐行向下滚动浏览。
如果想要翻动一整页，则可以使用PageDown键，同样地，想要向上翻页使用PageUp键。
如果想要在当前打开的帮助文档中查找某关键字，则可以先输入/，紧随其后再输入要查找的关键字后回车即可。
如果想要退出文档浏览，在普通模式下敲击q键则可退出。

help子命令不仅可以查看子命令的帮助文档，还可以查看package.json、npmrc等的帮助。

$ npm help package.json

$ npm help npmrc

【Web前端开发】npm你真的会用吗？相关推荐

创建 Web 前端开发环境(node和npm)
Web 前端开发涉及多种工具,这里将常用工具的安装和配置进行说明,提供了详细的说明,为后继的开发创建一个坚实的基础. 本文介绍的工具有:NodeJS, NPM, Bower, Git 和 Grunt. ...
web前端开发真的会持续高薪吗？（赠超实用前端干货大合集，含特效源码）
外媒网站Randstad US收集了目前IT领域各行业的数据,分析了劳动力趋势等数据,预测出在2018年,前端开发是三大最具有就业前景职业之一,而前端开发行业的薪资也会越来越高. 那么做前端的,薪资真 ...
使用Grunt搭建自动化的web前端开发环境-完整教程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! AD: jQuery在使用grunt,bootstrap在使用grunt, ...
快速入门Web前端开发的正确姿势
入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平.请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈.HTML/CSS/JavaScript 这三大基础技术栈肯定是需 ...
最详细，快速入门Web前端开发的正确姿势
入门标准入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平.请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈.HTML/CSS/JavaScript 这三大基础技术 ...
es6标准入门第3版pdf_最详细，快速入门Web前端开发的正确姿势
入门标准入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平.请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈.HTML/CSS/JavaScript 这三大基础技术 ...
快速入门Web前端开发
入门标准入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平.请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈.HTML/CSS/JavaScript 这三大基础技术 ...
Grunt搭建自动化web前端开发环境--完整流程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...
超级棒的170+款web前端开发工具汇总，千万要收藏好！
作者:web前端开发我们与企业内部的Web开发团队进行了很多次交流,研究了很长时间,最后将Debug工具与Web前端开发工具整理汇总在了一起,这些工具对每个Web开发人员都非常有用. 这些工具将使您 ...
学web前端开发有前途吗
web前端开发现在如此火爆,可以说是引领了IT培训行业的一个潮流,那么web前端开发都要学些什么知识呢?为什么这么火有前途吗?现在行业很需要这种人才吗?还是大家盲目跟风,随大流,下面小编对web前端做 ...

【Web前端开发】npm你真的会用吗？