前端开发中常在 Shell 环境中调用 npm 等工具命令，配合原生 Shell 命令完成自动化任务。Shell 是操作系统提供的命令行解释器，而 npm/yarn 是安装在系统中的 Node.js 工具，二者并非同一概念。掌握 Shell 基础能让你更好地理解项目脚本（package.json 中的 scripts）是如何执行的，以及在 CI/CD 流程中如何编写自动化任务。
先说结论：前端日常开发离不开 npm 或 yarn 等包管理命令，但需明确它们运行在 Shell 环境之上。复杂自动化场景建议编写独立 Shell 脚本，而非仅依赖 package.json。
- 适合：项目初始化、依赖安装、本地启动与构建打包场景
- 先看：环境变量 PATH 配置及 Node.js 版本是否匹配
- 建议：使用 bash -x 调试脚本，严禁在生产环境直接执行 rm -rf 操作
核心概念辨析
Shell 命令分为两类：原生命令（Built-in/OS commands）和外部工具命令（External tools）。
- 原生命令：如
cd、ls、pwd，由 Shell 直接提供，不依赖 Node.js。 - 工具命令：如
npm、yarn、git，是安装在系统中的可执行程序，通过 Shell 调用。
混淆二者会导致环境排查错误，例如 npm 命令找不到通常是 PATH 环境变量问题，而非 Shell 本身故障。
高频原生命令速查
以下命令不依赖 Node.js 环境，适用于任何 Shell 场景：
# 文件与目录操作
ls -la # 列出所有文件（含隐藏）及详细信息
cd project-dir # 切换目录
pwd # 显示当前路径
mkdir -p dist # 创建目录（-p 确保父目录存在）# 进程管理
ps aux | grep node # 查看 Node 相关进程
kill -9 <pid> # 强制终止进程（需谨慎）# 权限与查找
chmod +x script.sh # 赋予脚本执行权限
find . -name "*.js" # 查找当前目录下所有 js 文件实战：构建后处理脚本
以下是一个典型的前端构建后处理脚本示例，包含错误处理、备份及清理逻辑。
#!/bin/bash# 遇到错误立即退出，避免错误累积
set -ePROJECT_NAME="my-frontend"
BUILD_DIR="./dist"
BACKUP_DIR="./backup"# 定义颜色输出，便于区分状态
RED='\033[0;31m'
GREEN='\033[0;32m'
NC='\033[0m' # No Colorlog_info() {echo -e "${GREEN}[INFO]${NC} $1"
}log_error() {echo -e "${RED}[ERROR]${NC} $1"
}# 1. 清理旧构建文件
log_info "正在清理旧构建文件..."
# 风险警告：rm -rf 前务必确认变量路径不为空
if [ -z "$BUILD_DIR" ]; thenlog_error "BUILD_DIR 变量为空，终止操作以防误删"exit 1
fi
rm -rf "$BUILD_DIR"# 2. 执行构建
log_info "正在执行构建..."
# 使用 npm start 或 npm run build，视 package.json 配置而定
npm run build# 3. 备份构建产物
log_info "正在备份构建产物..."
mkdir -p "$BACKUP_DIR"
tar -czf "$BACKUP_DIR/${PROJECT_NAME}-$(date +%Y%m%d-%H%M%S).tar.gz" "$BUILD_DIR"log_info "构建与备份完成！"
验证与排查方法
1. 检查脚本执行状态
脚本执行完毕后，通过 echo $? 查看退出码，0 表示成功，非 0 表示失败。
./build.sh
echo $?2. 检查文件生成
构建完成后，使用 ls -lh dist 查看是否生成了预期文件及大小是否正常。
3. 调试脚本逻辑
若脚本行为异常，使用 bash -x 打印每一行执行细节。
bash -x build.sh常见风险与规避
1. 危险操作警告rm -rf 命令会强制删除文件夹及其内容，使用前务必确认路径变量不为空，避免误删生产环境文件。建议在脚本中加入路径非空判断。
2. 空格与语法敏感
Shell 中赋值时等号两边不能有空格（如 VAR=value 正确，VAR = value 错误）。命令之间的空格分隔了不同的参数。
3. 路径问题
脚本中涉及文件路径时建议使用绝对路径或基于脚本所在目录的相对路径，避免因执行目录不同导致文件找不到。
# 获取脚本所在目录
SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"4. 变量引用
使用变量时需加上 $ 符号（如 echo $PATH），定义变量时则不需要。引用变量建议加双引号以防路径含空格。
原文链接：https://www.zjcp.cc/ask/11029.html