前端开发常用Shell命令总结目录项目初始化与管理包管理器命令开发服务器与构建 Git版本控制文件操作进程管理

项目初始化与管理

创建新项目

# 创建React项目
npx create-react-app my-app
npx create-react-app my-app --template typescript

# 创建Vue项目
npm create vue@latest my-vue-project
vue create my-project

# 创建Next.js项目
npx create-next-app@latest my-next-app
npx create-next-app@latest my-next-app --typescript

# 创建Vite项目
npm create vite@latest my-vite-app
yarn create vite my-vite-app

# 创建Angular项目
ng new my-angular-app

# 初始化新的npm项目
npm init
npm init -y  # 使用默认配置

项目脚手架工具

# 使用Yeoman生成器
npm install -g yo
yo webapp

# 使用degit克隆模板
npx degit user/repo my-project

包管理器命令

NPM命令

# 安装依赖
npm install                    # 安装所有依赖
npm install package-name       # 安装指定包
npm install -g package-name    # 全局安装
npm install --save-dev package # 安装开发依赖
npm install --save-exact package # 精确版本安装

# 卸载依赖
npm uninstall package-name
npm uninstall -g package-name

# 更新依赖
npm update
npm update package-name
npm outdated                   # 查看过时的包

# 查看信息
npm list                       # 查看已安装的包
npm list -g --depth=0         # 查看全局包
npm info package-name          # 查看包信息
npm view package-name versions # 查看包的所有版本

# 缓存管理
npm cache clean --force        # 清理缓存
npm cache verify              # 验证缓存

# 脚本执行
npm run script-name           # 运行package.json中的脚本
npm run                       # 查看所有可用脚本

Yarn命令

# 安装依赖
yarn                          # 安装所有依赖
yarn add package-name         # 添加依赖
yarn add -D package-name      # 添加开发依赖
yarn global add package-name  # 全局安装

# 卸载依赖
yarn remove package-name
yarn global remove package-name

# 更新依赖
yarn upgrade
yarn upgrade package-name

# 查看信息
yarn list
yarn info package-name
yarn outdated

# 缓存管理
yarn cache clean

# 脚本执行
yarn script-name

PNPM命令

# 安装依赖
pnpm install
pnpm add package-name
pnpm add -D package-name
pnpm add -g package-name

# 卸载依赖
pnpm remove package-name
pnpm remove -g package-name

# 更新依赖
pnpm update
pnpm outdated

# 脚本执行
pnpm run script-name

开发服务器与构建

开发服务器

# 启动开发服务器
npm start
npm run dev
yarn start
yarn dev
pnpm dev

# 指定端口启动
PORT=3001 npm start
npm start -- --port 3001

# 构建项目
npm run build
yarn build
pnpm build

# 预览构建结果
npm run preview
yarn preview
pnpm preview

Webpack相关

# 使用webpack-dev-server
npx webpack serve
npx webpack serve --mode development
npx webpack serve --open

# 构建项目
npx webpack
npx webpack --mode production
npx webpack --watch

Git版本控制

基础操作

# 初始化仓库
git init

# 克隆仓库
git clone <repository-url>
git clone <repository-url> <directory-name>

# 查看状态
git status
git status -s                 # 简短格式

# 添加文件
git add .                     # 添加所有文件
git add file-name             # 添加指定文件
git add *.js                  # 添加所有js文件

# 提交更改
git commit -m "commit message"
git commit -am "commit message" # 添加并提交已跟踪文件

# 查看历史
git log
git log --oneline             # 简洁格式
git log --graph               # 图形化显示

分支操作

# 查看分支
git branch                    # 查看本地分支
git branch -r                 # 查看远程分支
git branch -a                 # 查看所有分支

# 创建分支
git branch branch-name
git checkout -b branch-name   # 创建并切换分支
git switch -c branch-name     # 新语法

# 切换分支
git checkout branch-name
git switch branch-name        # 新语法

# 合并分支
git merge branch-name
git merge --no-ff branch-name # 禁用快进合并

# 删除分支
git branch -d branch-name     # 删除已合并分支
git branch -D branch-name     # 强制删除分支

远程操作

# 查看远程仓库
git remote -v

# 添加远程仓库
git remote add origin <repository-url>

# 推送代码
git push origin main
git push -u origin main       # 设置上游分支

# 拉取代码
git pull origin main
git fetch origin              # 只获取不合并

# 标签操作
git tag v1.0.0
git push origin --tags

文件操作

基础文件操作

# 查看目录内容
ls                           # 列出文件
ls -la                       # 详细信息包括隐藏文件
ls -lh                       # 人性化显示文件大小

# 创建文件和目录
touch filename               # 创建空文件
mkdir dirname                # 创建目录
mkdir -p path/to/dirname     # 递归创建目录

# 复制文件
cp source destination        # 复制文件
cp -r source destination     # 递归复制目录

# 移动/重命名文件
mv source destination        # 移动或重命名文件

# 删除文件
rm filename                  # 删除文件
rm -rf dirname               # 递归删除目录
rm -i filename               # 交互式删除

# 查看文件内容
cat filename                 # 显示文件全部内容
head filename                # 显示文件前10行
tail filename                # 显示文件后10行
tail -f filename             # 实时监控文件变化
less filename                # 分页查看文件

文件查找

# 查找文件
find . -name "*.js"          # 查找当前目录下所有js文件
find . -type f -name "*.css" # 查找所有css文件
find . -type d -name "node_modules" # 查找目录

# 文本搜索
grep "search-text" filename  # 在文件中搜索文本
grep -r "search-text" .      # 递归搜索目录
grep -i "search-text" filename # 忽略大小写搜索

进程管理

查看进程

# 查看运行的进程
ps aux                       # 显示所有进程
ps aux | grep node           # 查找node进程
top                          # 实时显示进程
htop                         # 更友好的进程查看器

# 查看端口占用
lsof -i :3000                # 查看3000端口占用
netstat -tulpn | grep :3000  # Linux系统查看端口

进程控制

# 杀死进程
kill PID                     # 杀死指定进程ID
kill -9 PID                  # 强制杀死进程
killall node                 # 杀死所有node进程

# 后台运行
nohup npm start &            # 后台运行并忽略挂起信号
npm start &                  # 后台运行

# 进程管理工具
pm2 start app.js             # 使用PM2启动应用
pm2 list                     # 查看PM2管理的进程
pm2 stop app                 # 停止应用
pm2 restart app              # 重启应用

网络与调试

网络请求

# 使用curl
curl https://api.example.com # 发送GET请求
curl -X POST -d "data" url   # 发送POST请求
curl -H "Content-Type: application/json" -d '{"key":"value"}' url

# 使用wget
wget https://example.com/file.zip # 下载文件

# 测试连接
ping google.com              # 测试网络连接
telnet localhost 3000        # 测试端口连接

调试工具

# 查看网络连接
netstat -an                  # 显示所有网络连接
ss -tulpn                    # 现代版netstat

# 监控日志
tail -f /var/log/nginx/access.log # 实时查看nginx日志
journalctl -f                # 查看系统日志

# 性能监控
iostat                       # IO统计
vmstat                       # 虚拟内存统计

代码质量与测试

代码检查

# ESLint
npx eslint .                 # 检查所有文件
npx eslint --fix .           # 自动修复问题
npx eslint --init            # 初始化ESLint配置

# Prettier
npx prettier --write .       # 格式化所有文件
npx prettier --check .       # 检查格式

# TypeScript
npx tsc                      # 编译TypeScript
npx tsc --noEmit             # 只检查类型不生成文件

测试命令

# Jest
npm test                     # 运行测试
npm test -- --watch          # 监听模式
npm test -- --coverage       # 生成覆盖率报告

# 其他测试框架
npx mocha                    # 运行Mocha测试
npx cypress open             # 打开Cypress测试
npx playwright test          # 运行Playwright测试

部署相关

构建与部署

# 构建生产版本
npm run build
yarn build

# 静态文件服务器
npx serve -s build           # 服务构建后的文件
npx http-server dist         # 简单HTTP服务器

# Docker相关
docker build -t app-name .   # 构建Docker镜像
docker run -p 3000:3000 app-name # 运行容器

# 部署到服务器
scp -r build/ user@server:/path # 复制文件到服务器
rsync -av build/ user@server:/path # 同步文件

环境变量

# 设置环境变量
export NODE_ENV=production   # 设置Node环境
export API_URL=https://api.example.com

# 使用.env文件
echo "API_URL=https://api.example.com" > .env

系统信息查看

系统状态

# 查看系统信息
uname -a                     # 系统信息
whoami                       # 当前用户
pwd                          # 当前目录
date                         # 当前时间

# 磁盘空间
df -h                        # 查看磁盘使用情况
du -sh *                     # 查看当前目录各文件夹大小
du -sh node_modules          # 查看node_modules大小

# 内存使用
free -h                      # 查看内存使用情况(Linux)
vm_stat                      # 查看内存使用情况(macOS)

环境信息

# Node.js相关
node --version               # Node.js版本
npm --version                # npm版本
npx --version                # npx版本

# 查看已安装的全局包
npm list -g --depth=0        # npm全局包
yarn global list             # yarn全局包

# 查看环境变量
env                          # 显示所有环境变量
echo $PATH                   # 显示PATH变量
echo $NODE_ENV               # 显示Node环境变量

实用技巧

命令组合

# 命令链接
npm install && npm start     # 安装完成后启动
npm run build && npm run deploy # 构建完成后部署

# 管道操作
ps aux | grep node           # 查找node进程
ls -la | grep "\.js$"        # 查找js文件

# 条件执行
npm test || echo "Tests failed" # 测试失败时输出信息

快捷操作

# 历史命令
history                      # 查看命令历史
!!                          # 执行上一条命令
!n                          # 执行历史中第n条命令

# 目录操作
cd -                        # 返回上一个目录
pushd /path && popd         # 目录栈操作

# 快速编辑
code .                      # 在VSCode中打开当前目录
vim filename                # 使用vim编辑文件

别名设置

# 在 ~/.bashrc 或 ~/.zshrc 中添加别名
alias ll='ls -la'
alias la='ls -la'
alias ..='cd ..'
alias ...='cd ../..'
alias gs='git status'
alias ga='git add'
alias gc='git commit'
alias gp='git push'
alias gl='git pull'
alias nrs='npm run start'
alias nrb='npm run build'
alias nrt='npm run test'

注意事项

权限问题: 某些命令可能需要管理员权限，使用 sudo 前缀
路径问题: 注意相对路径和绝对路径的区别
版本兼容: 不同版本的工具命令可能有差异
备份重要: 删除操作前请确保重要文件已备份
环境差异: Windows、macOS、Linux系统间命令可能有差异

前端开发常用Shell命令总结

目录

项目初始化与管理

创建新项目

项目脚手架工具

包管理器命令

NPM命令

Yarn命令

PNPM命令

开发服务器与构建

开发服务器

Webpack相关

Git版本控制

基础操作

分支操作

远程操作

文件操作

基础文件操作

文件查找

进程管理

查看进程

进程控制

网络与调试

网络请求

调试工具

代码质量与测试

代码检查

测试命令

部署相关

构建与部署

环境变量

系统信息查看

系统状态

环境信息

实用技巧

命令组合

快捷操作

别名设置

注意事项

推荐学习资源