了解 NPM 包管理工具

NPM 全称 Node Package Manager ，它是 JavaScript 的包管理工具，并且是 Node.js 平台的默认包管理工具。通过 NPM 可以 安装、共享、分发代码，管理项目依赖关系。

可以从 NPM 服务器下载别人编写的第三方包到本地使用
可以从 NPM 服务器下载并安装别人编写的命令行程序到本地使用
可将自己编写的包或命令行程序上传到 NPM 服务器供别人使用

其实我们可以把 NPM 理解为前端的 Maven，通过 NPM 可以很方便地安装与下载 js 库、管理前端工程。当下版本的 Node.js 已经集成了 npm 工具，所以必须首先在本机安装 Node 环境，安装完成后，可以通过下面的命令查看 node.js 与 npm 版本：

$ node -v
v16.17.1

$ npm -v
8.15.0

NPM 初始化项目

可以使用 npm init 命令初始化项目，具体步骤如下：

首先创建一个 npm-demo 的文件夹，通过命令提示符窗口进入到该文件夹，然后执行下面的命令初始化项目

$ npm init

根据提示输入相关信息，如果使用默认值，则直接回车即可：

package name： 包名，其实就是项目名称（不能有大写字母）
version： 项目版本号
description： 项目描述
keywords： {Array}关键字，便于用户搜索到我们的项目

最后会生成一个 package.json 文件，这个是包的配置文件，之后也可以根据需要进行修改：

{
  "name": "npm-demo", //包名 
  "version": "1.0.0", //版本号 
  "description": "first npm demo", // 描述 
  "main": "index.js", //程序的主入口文件 index.js 
  "scripts": { // 脚本命令组成的对象, 如果 test 测试环境，dev 开发环境，prod 生产环境 
    "test": "echo \"Error: no test specified\" && exit 1" 			},
  "author": "", 
  "license": "ISC" //许可证 默认即可 }
}

如果初始化项目的时候均采用默认信息，则可以使用 npm init -y 命令，此时不会提示你手动输入信息。

安装模块

npm install 命令用于安装某个模块，安装方式分为：本地安装（local） 和 全局安装（global）：

本地安装： 将 JS 库安装在当前执行命令时所在目录下，命令为：npm install <Module Name>[@版本号]
全局安装： 将 JS 库安装到全局目录下，命令为：npm install <Module Name>[@版本号] -g

如果在安装的时候下面的错误：npm err! Error:connect ECONNREFUSED 127.0.0.1:8087，解决方法是执行如下命令：npm config set proxy null。

本地安装

本地安装就是将 JS 库安装在当前目录下：

$ npm install jquery

如果出现黄色的警告信息可以忽略。

安装成功后，会在当前目录下出现一个 node_modules 文件夹和 package-lock.json 文件：

node_modules： 该文件夹用于存放下载的 js 库
package-lock.json： 该文件是执行 npm install 命令的时候生成的一个文件，用来记录当前状态下实际安装的各个包的具体来源和版本号

重新打开 package.json 文件，刚才下载的 jquery.js 已经添加到依赖列表中：

{
  "name": "npm-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.1"
  }
}

关于模块版本号表示方式：

指定版本号（3.5.2）：只安装指定版本，遵循 "大版本.次要版本.小版本" 的格式规定

～ + 指定版本号（~3.5.2）：安装 3.5.x 的最新版本（不低于 3.5.2），但是不安装 3.6.x，也就是说安装时不改变大版本号和次要版本号

^ + 指定版本号（^3.5.2）：安装 3.x.x 的最新版本（不低于 3.5.2），但是不安装 4.x.x，也就是说安装时不改变大版本号。需要注意的是，如果大版本号为 0，则插入号的行为与波浪号相同，这就是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容

latest：安装最新版本

可以指定安装特定版本的模块：

$ npm install jquery@2.2.0

全局安装

使用全局安装会将库安装到全局目录下，可以使用下面的命令查看当前的全局目录在哪里：

$ npm root -g

也可以使用下面的命令来修改默认的全局安装目录：

$ npm config set prefix "D\npm"

可以使用下面的命令来全局安装：

$ npm install @vue/cli -g

安装完成后，可以使用下面的命令来查看：

$ npm list -g
/usr/local/lib
├── @vue/cli@5.0.8
├── corepack@0.12.1
└── npm@8.15.0

生产环境安装

生产环境安装就是把模块的版本信息保存在 package.json 文件的 dependencies 字段中，可以使用 --save 或 -S 参数：

$ npm install <Module Name> [--save|-S]

如在生产环境安装 vue 模块，安装在生产环境依赖中：

$ npm install vue -S

在 package.json 文件的 dependencies 字段中：

{
  "name": "npm-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.1",
    "vue": "^3.2.45"
  }
}

开发环境安装

开发环境安装就是把模块版本信息保存到 package.json 文件的 devDependencies 字段中，所以开发阶段一般使用它。可以使用 --save-dev 或 -D 参数：

$ npm install <Module Name>[--save-dev|-D]

比如安装 eslint 模块，它是用来语法格式校验，只在开发开发环境依赖中即可：

$ npm install eslint -D

在 package.json 文件的 devDependencies 字段中：

{
  "name": "npm-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.1",
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "eslint": "^8.27.0"
  }
}

批量下载模块

当我们从网上下载某些项目后，发现只有 package.json ，没有 node_modules 文件夹，这时我们需要通过命令下载这些 js 库：

在命令提示符进入 package.json 所在目录，执行命令：

$ npm install

此时，npm 会自动下载 package.json 中依赖的 js 库。

查看模块命令

（一）查看本地已安装模块方式

方式一：可以在安装目录 node_modules 下查看包是否存在
方式二：可以使用下面命令查看：

# 查看本地安装的所有的模块
$ npm list

# 查看指定模板
$ npm list <Module Name>

（二）查看模块远程版本

查看模块远程版本的格式如下：

# 查看远程最新版本
$ npm view <Module Name> version

# 查看远程所有版本
$ npm view <Module Name> versions

卸载模块

# 卸载局部模块
$ npm uninstall <Module Name>

# 卸载全局模块
$ npm uninstall -g <Module Name>

配置淘宝镜像加速

# 查看当前使用的镜像地址
$ npm get registry

# 配置淘宝镜像地址
$ npm config set registry https://registry.npm.taobao.org

# 还原默认镜像地址
$ npm config set registry https://registry.npmjs.org/

01-NPM 包管理工具