TDL的个人笔记

切换主题

前端命令速查手册 ​

前端全环节命令案例 ​

创建项目 ​

# React + TypeScript + Vite 项目创建
npx create-vite@latest my-app --template react-ts      # 新手推荐
pnpm create vite my-app --template react-ts            # 个人项目
npm create vite@latest my-app -- --template react-ts   # 兼容优先

# Next.js 项目
npx create-next-app@latest                             # 交互式
npx create-next-app@latest my-app --typescript --tailwind --app  # 全配置

# 使用特定模板
pnpm create vite my-app --template react-ts-tailwind
npm create vite@latest my-app --template react-swc-ts

进入项目目录 ​

# 进入创建的项目目录
cd my-app

# 查看项目结构
ls -la  # Linux/Mac
dir     # Windows

# 检查项目配置文件
cat package.json  # Linux/Mac
type package.json # Windows

安装项目依赖 ​

# 使用对应包管理器安装依赖
npm install       # npm 方式
pnpm install      # pnpm 方式（推荐）
yarn install      # yarn 方式
bun install       # bun 方式

# 安装特定依赖包
npm install react-router-dom            # 安装路由
npm install -D tailwindcss eslint       # 安装开发依赖
pnpm add axios                          # pnpm 安装

配置开发环境 ​

# 初始化配置文件
npx tailwindcss init -p                # 初始化 Tailwind
npx eslint --init                      # 初始化 ESLint
npx prettier --init                    # 初始化 Prettier

# 安装代码质量工具
npm install -D prettier eslint-config-prettier
npm install -D @typescript-eslint/eslint-plugin

# 配置 Git 钩子
npm install -D husky lint-staged
npx husky init
npm pkg set scripts.prepare="husky install"

启动开发服务器 ​

# 启动开发环境
npm run dev        # Vite 项目
npm start          # Create React App 项目
npm run develop    # 某些模板使用

# 带参数的启动命令
npm run dev -- --host    # 允许外部访问
npm run dev -- --port 3001  # 指定端口
npm run dev -- --open    # 自动打开浏览器

代码质量检查 ​

# 代码格式检查
npm run lint              # ESLint 检查
npm run lint -- --fix     # 自动修复问题
npx eslint src/          # 直接运行 ESLint

# 代码格式化
npm run format           # Prettier 格式化
npx prettier --write src/ # 直接格式化
npx prettier --check .   # 检查格式

# TypeScript 类型检查
npm run type-check       # 类型检查
npx tsc --noEmit         # 直接检查类型

运行测试 ​

# 单元测试
npm test                 # 运行测试
npm test -- --watch      # 监听模式
npm test -- --coverage   # 测试覆盖率

# E2E 测试
npm run test:e2e         # E2E 测试
npx playwright test      # Playwright
npx cypress run          # Cypress

# 测试相关工具
npm run test:ui          # 测试 UI 界面
npm run test:debug       # 调试模式

构建生产版本 ​

# 生产环境构建
npm run build            # 构建项目
npm run build -- --analyze  # 构建分析（如果支持）

# 预览生产构建
npm run preview          # Vite 预览
npx serve -s dist       # 静态服务预览
npm run serve           # 某些模板使用

# 构建优化
npm run build:analyze   # 打包分析
npm run build:report    # 构建报告

代码提交与部署 ​

# Git 操作
git add .                          # 添加文件
git commit -m "feat: add feature"   # 提交代码
git push origin main               # 推送到远程

# 部署命令
npm run deploy                     # 自动部署
vercel --prod                      # Vercel 部署
netlify deploy --prod              # Netlify 部署

# Docker 部署
docker build -t my-app .          # 构建镜像
docker run -p 3000:3000 my-app    # 运行容器

依赖包管理 ​

# 安装/更新依赖
npm install package-name           # 安装依赖
npm update                        # 更新所有依赖
npm outdated                      # 检查过时包

# 安全审计
npm audit                         # 安全审计
npm audit fix                    # 自动修复漏洞
npm audit fix --force           # 强制修复

# 依赖分析
npm list                         # 查看依赖树
npm ls --depth=0                 # 查看顶层依赖
npx depcheck                     # 检查未使用依赖

性能分析与优化 ​

# 打包分析
npm run build:analyze           # 打包大小分析
npx vite-bundle-analyzer        # Vite 打包分析

# 性能测试
npm run build:report            # 性能报告
npx lighthouse http://localhost:3000 # 性能测试

# 内存分析
node --inspect-brk node_modules/.bin/react-scripts start

环境变量配置 ​

# 环境变量设置
cp .env.example .env.local      # 复制环境变量文件
echo "API_URL=http://localhost:3001" >> .env  # 添加环境变量

# 不同环境构建
npm run build:dev              # 开发环境构建
npm run build:staging          #  staging 环境
npm run build:prod             # 生产环境

项目维护命令 ​

# 清理和重置
npm run clean                  # 清理构建文件
rm -rf node_modules           # 删除依赖（Linux/Mac）
rd /s node_modules            # 删除依赖（Windows）

# 缓存管理
npm cache clean --force       # 清理 npm 缓存
pnpm store prune             # 清理 pnpm 存储

# 版本管理
npm version patch            # 更新补丁版本
npm version minor            # 更新次版本
npm version major            # 更新主版本

调试与问题排查 ​

# 调试命令
npm run dev -- --inspect     # 启用调试
node --inspect-brk script.js # Node.js 调试

# 日志查看
npm run dev 2>&1 | tee dev.log  # 保存开发日志
tail -f dev.log                 # 实时查看日志

# 问题排查
npm doctor                     # 检查 npm 环境
npm list --depth=0            # 检查安装的包

Monorepo 项目管理 ​

# pnpm workspace
pnpm -r install               # 所有包安装依赖
pnpm -r build                 # 所有包构建
pnpm --filter=package-name dev  # 运行特定包

# Turborepo
npm run build                # 构建所有包
npm run dev --filter=web     # 只运行 web 应用

这个命令手册按照前端开发的完整流程组织，从项目创建到部署上线的每个环节都有对应的命令，方便你在不同阶段快速查找和使用。

命令速查 ​

pnpm ​

  • pnpm install
  • pnpm add 包名
  • pnpm add -D 包名（开发依赖）
  • pnpm dev / build / preview

npm（兼容旧项目）命令同上，把 pnpm 换成 npm（npm ci 更严格）。

brew（macOS） ​

bash
brew install fnm          # 安装 Node 版本管理器
brew install node@20      # 直接装特定版本

fnm（Node 版本切换） ​

bash
fnm use --install-if-missing 20   # 自动安装并切换到 Node 20 LTS
fnm use 22                        # 切换到最新版