前端常用包管理命令 | 技术笔记

前端开发中常用的命令和工具包括 npm 和 Vite，它们在前端项目中扮演着重要角色。以下是对它们的详细介绍，包括常用命令参数、使用场景、优缺点等。

1. npm（Node Package Manager）

npm 是 Node.js 的包管理工具，用于安装、管理和发布 JavaScript 包。

常用命令

初始化项目
```
npm init
```
创建一个 package.json 文件，记录项目的依赖和配置。
安装包
```
npm install <package-name>
```
安装指定包到 node_modules 目录，并将其添加到 package.json 的 dependencies 中。
- 安装开发依赖（devDependencies）：
```
npm install <package-name> --save-dev
```
- 全局安装：
```
npm install -g <package-name>
```
卸载包
```
npm uninstall <package-name>
```
更新包
```
npm update <package-name>
```

运行脚本

npm run <script-name>

运行 package.json 中定义的脚本，例如：

"scripts": {
  "start": "vite",
  "build": "vite build"
}

查看已安装的包
```
npm list
```
清理缓存
```
npm cache clean --force
```

使用场景

管理项目依赖。
运行构建、测试、启动等脚本。
发布自己的包到 npm 仓库。

优缺点

优点：
- 生态丰富，几乎所有的 JavaScript 库都支持 npm。
- 简单易用，社区支持强大。
缺点：
- 依赖安装速度较慢（尤其是嵌套依赖）。
- 依赖管理可能不够严格，容易出现版本冲突。

2. Vite

Vite 是一个现代化的前端构建工具，专注于开发环境的快速启动和生产环境的高效构建。

常用命令

创建项目
```
npm create vite@latest
```
通过交互式命令行创建一个新的 Vite 项目。
启动开发服务器
```
npm run dev
```
启动开发服务器，支持热更新（HMR）。
构建生产环境代码
```
npm run build
```
将项目打包为生产环境代码，输出到 dist 目录。
预览生产环境代码
```
npm run preview
```
本地预览构建后的生产环境代码。

常用配置参数

开发服务器端口
```
vite --port 3000
```
指定开发服务器的端口。
自定义配置文件
```
vite --config my-config.js
```
使用自定义的配置文件。

使用场景

快速启动开发环境，适合现代前端框架（如 Vue、React、Svelte）。
构建高性能的生产环境代码。

优缺点

优点：
- 开发环境启动速度快（基于原生 ES 模块）。
- 支持热更新（HMR），开发体验好。
- 生产环境构建优化（基于 Rollup）。
缺点：
- 对旧版浏览器的支持需要额外配置（如 polyfill）。
- 生态相对较新，部分插件可能不够成熟。

3. 其他常用命令

npx

npx 是 npm 5.2.0 引入的工具，用于临时安装并运行包。

运行本地或远程包

npx <package-name>

例如：

npx create-react-app my-app

yarn

yarn 是另一个流行的包管理工具，与 npm 类似，但具有更快的安装速度和更好的依赖管理。

初始化项目
```
yarn init
```
安装包
```
yarn add <package-name>
```
运行脚本
```
yarn <script-name>
```

pnpm

pnpm 是一个高效的包管理工具，通过硬链接和符号链接减少磁盘空间占用。

安装包
```
pnpm add <package-name>
```

总结

npm：最常用的包管理工具，适合管理项目依赖和运行脚本。
Vite：现代化的构建工具，适合快速开发和高效构建。
yarn/pnpm：npm 的替代品，提供更快的安装速度和更好的依赖管理。