如何停止React开发服务器后仍执行父脚本的清理步骤？

DevOps 小满

2026-8-18

解决Ctrl+C终止开发服务器后执行清理步骤的Shell脚本方案

Bash（Linux）解决方案

在Bash中，我们可以通过trap命令捕获Ctrl+C触发的SIGINT信号，绑定自定义清理函数，确保服务器终止后清理步骤能正常执行：

#!/bin/bash

# 构建准备步骤
echo "执行构建准备操作..."
# 这里替换为你的实际准备命令，比如npm install、创建临时目录等

# 定义清理函数
cleanup() {
    echo -e "\n开始执行构建清理..."
    # 这里替换为你的实际清理命令，比如删除临时文件、清理日志等
    exit 0
}

# 捕获Ctrl+C信号，触发清理函数
trap cleanup SIGINT

# 启动React开发服务器
npx react-scripts start

# 若服务器正常退出，同样执行清理
cleanup

原理说明

trap cleanup SIGINT会告诉Shell：当接收到SIGINT信号（用户按下Ctrl+C）时，先执行cleanup函数内的逻辑，再终止脚本，避免清理步骤被直接跳过。

PowerShell解决方案

PowerShell需要通过监听键盘事件捕获Ctrl+C，绑定清理逻辑：

# 构建准备步骤
Write-Host "执行构建准备操作..."
# 这里替换为你的实际准备命令，比如npm install、创建临时目录等

# 定义清理函数
function Cleanup {
    Write-Host "`n开始执行构建清理..."
    # 这里替换为你的实际清理命令，比如删除临时文件、清理日志等
    exit 0
}

# 注册Ctrl+C事件监听
[console]::TreatControlCAsInput = $false
$keyEvent = Register-ObjectEvent -InputObject $host.ui.rawui -EventName KeyPressed -Action {
    if ($EventArgs.Key -eq 'C' -and $EventArgs.ControlKeyState -eq 'LeftCtrlPressed') {
        Cleanup
    }
}

# 启动React开发服务器
npx react-scripts start

# 注销事件监听，避免残留
Unregister-Event -SourceIdentifier $keyEvent.Name

# 服务器正常退出时执行清理
Cleanup