一、前言

1. 是什么

npm is the package manager for JavaScript and the world’s largest software registry. npm是JavaScript的包管理器，也是世界上最大的软件注册中心。

2. 为什么需要它

现代化前端开发中，需要用到很多别人写好的模块包。如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用的话非常繁琐。于是一个集中管理的工具应运而生。大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪里，应该从哪里下载。

更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。

3. 怎么用

在安装了 node 之后，就可以使用 npm 命令了。

二、常用命令

1. 初始化

在当前目录中生成 package.json 文件（项目描述文件）

  1. $ npm init
  3. $ npm init -y

image.png

2. 安装生产依赖包

生产依赖包指的是不管在开发时还是上线之后项目都需要使用到的。比如 jQuery、bootstrap、lodash 等。

  1. # 默认安装最新版本
  2. $ npm install <packageName>
  4. # 安装指定 version 版本
  5. $ npm install <packageName>@<version>
  7. # 安装指定 tag 版本
  8. $ npm install <packageName>@<tag>
  • npm install 可简写成 npm i
  • 会写入到 package.json 文件中的 dependencies 配置中。以前需要加 —save 或 -S 参数。现在不需要了

3. 安装开发依赖包

开发依赖包指的是仅在开发过程中需要使用到的。比如 gulp、webpack、nodemon 等工具类型的依赖包。

  1. # 默认安装最新版本
  2. $ npm install <packageName> --save-dev
  4. # 安装指定 version 版本
  5. $ npm install <packageName>@<version>  --save-dev
  7. # 安装指定 tag 版本
  8. $ npm install <packageName>@<tag>  --save-dev
  • —save-dev 可简写成 -D
  • 会写入到 package.json 文件中的 devDependencies 配置中。

4. 更新依赖包

  1. # 更新全部依赖包
  2. $ npm update 
  4. # 更新指定依赖包
  5. $ npm update <packageName>

注意：更新依赖包时会根据 package.json 文件中依赖包的前缀符号做不同处理

~会匹配最新的修订号，比如~0.19.1会匹配所有0.19.x版本，但是不包括0.20.0
^会匹配最新的次版本号，比如^1.11.4会匹配所有1.x.x版本，但是不包括2.0.0**

image.png

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

  1.   1. **主版本号：**当你做了不兼容的 API 修改。为 0 时一般表示处于开发阶段。
  2.   1. **次版本号：**当你做了向下兼容的功能性新增。
  3.   1. **修订号：**当你做了向下兼容的问题修正。

除了版本号之外还有一些修饰的词，比如：

  1.   1. **alpha：**内部版本
  2.   1. **beta：**测试版本
  3.   1. **rc：**即将作为正式版发布
  4.   1. **lts：**长期维护版本

5. 安装项目全部依赖

项目的依赖包是存放在项目的 node_modules 文件夹中的，项目依赖多的时候，这个文件夹会非常大。版本管理时都会忽略这个文件夹。

项目克隆下来之后，如果按照 package.json 中的依赖项一个一个手动去安装，将非常费时费力。 这时可以直接使用 npm install 命令。它会依据 package.json 将全部依赖都安装好。

  1. $ npm install

6. 全局安装

全局一般安装的是一些工具类型的。比如 nodemon、live-server、gulp、webpack、@vue/cli、create-react-app 等

  1. $ npm install <packageName> -g
  1. 全局安装的工具包，存放在哪里呢？

C:\Users\xxx用户\AppData\Roaming\npm

  1. 有些时候，可能会出现命令缺失的问题

image.png

  1. 去全局安装的工具包目录下查找是否的确有 nodemon
  2. 查看系统环境变量是否将 工具包目录 添加到了 path 配置中。（！不要随意去乱改 ！）
  3. 重新打开个终端，再试试。

7. 卸载包

  1. # 卸载当前项目下的
  2. $ npm uninstall <packageName>
  4. # 卸载全局的
  5. $ npm uninstall <packageName> -g

三、npm 换源

下载第三方依赖包时默认是从国外的服务器下载的。由于种种原因，下载的速度不尽如意。 这时可以采用淘宝的镜像源。

1. 查看npm源地址

  1. $ npm config get registry

2. 修改npm源地址

  1. $ npm config set registry <源地址>
  1. 淘宝镜像源地址：https://registry.npm.taobao.org/
  2. 默认源地址：https://registry.npmjs.org/

3. npm源的配置文件地址在哪里

C:\Users\xx用户.npmrc

四、npm script （npm 脚本）

有时我们需要通过各种命令来启动项目或者做一些其它事情，比如说：

nodemon index.js

gulp

上面这两个命令还是比较简单容易记忆。下面看一下这些命令：

nodemon index.js —hello —world —abc —ejg —我的天 （不一定能正常使用，随便写的一条）

记忆上面这一条命令就非常不容易，也不明智。这时就可以使用 npm 脚本。

npm 脚本，就是讲一些命令写入到脚本中，后续运行脚本就好了，脚本记忆起来是非常简单的也是可以直接去找到脚本的代码

npm 脚本是写在 package.json 文件中的 scripts 字段中

  1. {
  2.     "scripts": {
  3.     "test": "echo \"Error: no test specified\" && exit 1"
  4.   },
  5. }

scripts 中每一个键值对就是一个脚本命令，key 是脚本名。value 是这个脚本要做的操作

运行脚本 使用 npm run <脚本名> 来运行即可。
有一个特殊的脚本 start 。如果脚本名是 start 。那么可以不加 run 。直接 npm start 即可