NPM是什么、NPM常用命令

npm 应用及常用命令

[TOC]

<h2>NPM是什么</h2>

NPM全称：node.js package management
NPM是一个模块托管平台，也是node.js的包管理工具
平台官方网站：[进入官网](https://www.npmjs.com/)

# 1. NPM常用命令

## 1.1. 包的安装、更新与卸载

### 1.1.1. 全局安装更新与卸载

全局安装的包位于node.js环境的node_modules目录下，全局安装的包一般用于命令行工具，例如下面提到的`es-checker`,`i5ting_toc`

#### 1.1.1.1. 安装

安装默认为包的最新版本

```Shell
npm install -g 包名称
# 安装es-checker包
npm install -g es-checker
```

> Tips：npm install 也可以简写为 npm i，例如 npm i axios

#### 1.1.1.2. 安装并指定版本

```Shell
npm install -g 包名称@版本号
# 安装i5ting_toc包的v1.1.0版
npm install -g i5ting_toc@v1.1.0
```

#### 1.1.1.3 更新包

更新包的最新版本

```Shell
npm update -g 包名称
npm update -g es-checker
```

#### 1.1.1.4. 卸载

```Shell
npm uninstall -g 包名称
# 卸载一个名为es-checker的包
npm uninstall -g es-checker
```

### 1.1.2. 项目内安装更新与卸载

本地安装的包都是用于项目开发，安装在具体的项目中，安装的包在当前目录的node_modules目录下，本地安装包规范需要初始化一个包的入口

#### 1.1.2.1. 初始化包规则描述文件package.json

进入到项目目录下执行初始化命令

```Shell
npm init
```

生成后的package.json内容如下，生成过程可以给下面的属性赋值，示例没有赋值直接enter到初始化完成

```json
{
  "name": "modules",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
```
快速生成package.json文件

```Shell
npm init -y
```

执行生成好的包使用`node .`命令，此命令指向的就是`package.json`文件中的`mian`属性。如果报错查看是否缺少入口文件`index.js`，如果想使用`npm`命令来执行`index.js`文件需要对`package.json`文件的`script`属性进行调整，修改后使用`npm run test`命令同样可以得到`index.js`执行结果

package.json

```json
 "scripts": {
    "test": "node index.js"
  }
```

npm命令执行

```Shell
npm run test
# 执行后有以下提示后输出结果
# > modules@1.0.0 test
# > node ../01-basicOperation/01.js
```

#### 1.1.2.2. 安装

```Shell
npm install art-template@4.7.1
```

安装完成后在脚本文件中`index.js`引入包就可以使用了，主要引用时名称需要和安装后包中package.json文件中的name属性一致

```js
let template = require('art-template')
// art-template具体的使用方式见官方文档
```

引用art-template包的简单示例

user.art文件内容如下，art-template模板文件art文件

```html
{{if user}}
<h2>{{user.name}}</h2>
{{/if}}
```

使用art-template包

```js
let template = require('art-template')
let path = require('path')
let html = template(path.join( __dirname + '../../user.art'),{
    user:{
        name:'你好！'
    }
})
console.log(html)
// 输出<h2>你好！</h2>
```

#### 1.1.2.3. 更新

```Shell
npm update art-template@latest
# latest更新到最新的包，当然@4.9.2就是更新到4.9.2版本，npm update 包@latest更新有时并不会生效，那么这时还是需要使用install进行重新安装，npm install 包@latest
```

#### 1.1.2.4. 卸载

```Shell
npm uninstall art-template
```

### 1.1.3. 安装并添加环境依赖

#### 1.1.3.1 生产环境安装

```Shell
npm install art-template --save
```

安装完成后会在package.json文件中追加一个依赖属性`dependencies`

```json
  "dependencies": {
    "art-template": "^4.13.2"
  }
```

#### 1.1.3.2. 开发环境安装

```Shell
npm install art-template --save-dev
```

安装完成后会在package.json文件中追加一个依赖属性`devDependencies`

```json
  "devDependencies": {
    "art-template": "^4.13.2"
  }
```

#### 1.1.3.3. 生产环境安装包

安装会按照package.json文件中依赖属性`dependencies`进行包的安装

```Shell
npm install --production
```

如果没有在命令后面添加`--production`那么命令`npm install`会安装项目中所有依赖的包，`dependencies` + `devDependencies`

### 1.1.4. 常用安装命令参数汇总

`npm install` 的参数数量较大，官方文档列出了 30 多个。下面表格标注它们的必要性、作用及缩写方式：

| 参数 (全称) | 参数 (常用缩写) | 是否必选 | 作用 |
| :--- | :--- | :--- | :--- |
| `--global` | `-g` | 可选 | **全局安装**。将包安装在系统目录，而非当前项目中。 |
| `--save` | `-S` | 可选 | **生产依赖**。将包信息写入 `package.json` 的 `dependencies` 字段，项目运行时需要。 |
| `--save-dev` | `-D` | 可选 | **开发依赖**。将包信息写入 `package.json` 的 `devDependencies` 字段，仅在开发时需要。 |
| `--save-optional` | `-O` | 可选 | **可选依赖**。将包写入 `optionalDependencies` 字段，安装失败不会中断整个过程。 |
| `--save-exact` | `-E` | 可选 | **精确版本**。安装时锁定版本号，不带 `^` 或 `~` 符号，以精确版本记录。 |
| `--save-bundle` | `-B` | 可选 | **打包依赖**。将包同时加入到 `bundledDependencies` 列表中，执行 `npm pack` 时会一并打包。 |
| `--production` | 无 | 可选 | **生产模式**。仅安装 `dependencies` 中的包，忽略开发依赖。 |
| `--legacy-peer-deps` | 无 | 可选 | **忽略依赖冲突**。忽略项目中包之间存在的 peerDependencies 冲突并继续安装。 |
| `--force` | 无 | 可选 | **强制安装**。无视缓存，强制从远程重新拉取所有包。 |
| `--dry-run` | 无 | 可选 | **模拟安装**。只查看安装过程中会发生什么变更，但实际不进行任何安装操作。 |
| `--no-save` | 无 | 可选 | **临时安装**。将包安装到 `node_modules`，但不写入 `package.json`，下次 `npm install` 时会丢失。 |
| `--ignore-scripts` | 无 | 可选 | **忽略脚本**。安装时不执行 `package.json` 中定义的 `preinstall`、`postinstall` 等任何脚本。 |
| `--no-optional` | 无 | 可选 | **禁止可选依赖**。阻止安装 `optionalDependencies` 中标记的包。 |
| `--no-package-lock` | 无 | 可选 | **不生成锁文件**。安装时不生成或更新 `package-lock.json` 文件。 |
| `--prefer-offline` | 无 | 可选 | **离线优先**。优先使用本地缓存安装包，缓存中没有时才从远程获取。 |
| `--registry=<url>` | 无 | 可选 | **指定镜像源**。允许临时将包下载到 `<url>` 指定的自定义源。 |
| `--loglevel=<level>` | 无 | 可选 | **设置日志级别**。控制 `npm` 输出的详细和信息量情况，如 `error`， `warn`， `http` 等。 |
| `--location=global` | 无 | 可选 | **明确全局位置**。自 `npm v7` 起，推荐使用此参数替代 `-g` 进行全局安装。 |
| `--no-bin-links` | 无 | 可选 | **忽略符号链接**。防止 `npm` 为包中的可执行文件创建 `node_modules/.bin/` 符号链接。 |
| `--strict-peer-deps` | 无 | 可选 | **严格依赖冲突**。当遇到 peerDependencies 冲突时，让安装过程直接失败并停止。 |

> **Tips：常用场景速查**
 + 日常开发安装依赖：`npm install` (无参数) 或 `npm i [包名]`
 + 添加生产依赖：`npm install [包名] --save` (或 `-S`)
 + 添加开发依赖：`npm install [包名] --save-dev` (或 `-D`)
 + 全局安装工具：`npm install -g [包名]`
 + 生产环境构建：`npm install --production`
 + 解决依赖冲突：`npm install --legacy-peer-deps`

## 1.2. 设置下载镜像的地址

**作用：**这个命令用来修改 npm 的默认包下载源（registry）地址。

- registry：可以理解为“包仓库”或“镜像源”，npm 从那里下载 `.tgz` 包，并查询包的元数据。
- 默认的 registry 是 `https://registry.npmjs.org/`（官方源，托管在海外服务器）。

```Shell
# 语法
npm config set registry url
# ----------------------------------------------------------------------------
# 执行 npm config set registry https://mirrors.example.com/ 后，今后所有 npm install、npm publish 等操作都会针对新设置的地址进行。
```

**什么时候需要使用它？**

> **Tips**
> 这个命令是**永久修改**配置文件（通常在你的 `~/.npmrc` 或项目目录下）。如果只想**单次使用**不同的 registry，不需要修改配置，可以这样：
>
```bash
npm install --registry=https://registry.npmmirror.com/
```

### 1.2.1. 示例

```bash
# 查看当前 registry
npm config get registry

# 设置成淘宝镜像（国内常用）
npm config set registry https://registry.npmmirror.com/

# 再安装依赖，速度会明显变快
npm install
```

### 1.2.2. 补充常用命令

> **小技巧**：如果你经常需要切换 registry，可以安装 `nrm`（npm registry manager）工具，它提供了类似 `nrm use taobao`、`nrm test` 等便捷命令。

## 1.3. 执行包

```Shell
npm run 命令参数 #（package.json中script对象下属性的名称）
```

package.json文件

```json
{
  "name": "base",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:dev": "vite build --mode development",
    "build:test": "vite build --mode test",
    "build:prod": "vite build --mode production",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.24",
    "vue-router": "^4.6.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.1",
    "vite": "^7.2.4"
  }
}
```

## 1.4. 查看npm安装路径

```shell
npm config get prefix
```

## 1.5. 全局安装简单服务

全局安装服务需要管理员权限，因此用管理员权限打开cmd安装即可

```shell
npm install -g serve
```

## 1.6. 使用简单服务运行项目

使用这个命令必须先安装 server 服务，也就是上面7.的命令

```shell
npm serve dist -p 5000  # 指定在 5000这个端口上运行
# 或
npx serve dist -p 5000
```