如何捕获esbuild构建错误并运行脚本？（npm、VSCode、vanilla JS环境）

方法1：使用esbuild Node.js API（推荐） #

直接通过Node.js调用esbuild API，能在代码里直接捕获构建错误，进而执行自定义脚本。

示例代码（命名为build.js）：

const esbuild = require('esbuild');
const { execSync } = require('child_process');

async function build() {
  try {
    await esbuild.build({
      entryPoints: ['src/index.js'],
      bundle: true,
      outfile: 'dist/bundle.js',
      // 填入你的其他esbuild配置
    });
    console.log('构建成功');
  } catch (err) {
    console.error('构建错误:', err);
    // 执行指定脚本
    execSync('node scripts/handle-error.js', { stdio: 'inherit' });
    // 保留错误码，让npm脚本感知构建失败
    process.exit(1);
  }
}

build();

修改package.json的脚本：

{
  "scripts": {
    "build": "node build.js"
  }
}

方法2：利用npm脚本的shell逻辑 #

如果偏好命令行方式，可通过shell错误码判断触发后续脚本。不同系统语法略有区别：

Unix-like系统（macOS/Linux）示例： #

{
  "scripts": {
    "build": "esbuild src/index.js --bundle --outfile=dist/bundle.js || node scripts/handle-error.js"
  }
}

||表示前面的esbuild命令执行失败（返回非0错误码）时，才执行后续脚本。

Windows兼容方案 #

先安装cross-env做跨环境兼容：

npm install cross-env --save-dev

再修改脚本：

{
  "scripts": {
    "build": "cross-env-shell \"esbuild src/index.js --bundle --outfile=dist/bundle.js || node scripts/handle-error.js\""
  }
}

方法3：VSCode任务配置 #

在VSCode中配置任务时，直接调用上述npm脚本即可，错误处理逻辑会自动触发。创建.vscode/tasks.json：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build with Error Handler",
      "type": "npm",
      "script": "build",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": ["$esbuild"]
    }
  ]
}

关键说明 #

• esbuild的build API在构建失败时会抛出异常，用try/catch即可捕获。
• 命令行方式依赖shell的错误码传递，esbuild构建失败会返回非0错误码，确保||能触发后续逻辑。
• 自定义脚本可实现任意需求：发送通知、生成错误报告、清理临时文件等。

内容的提问来源于stack exchange，提问作者dllb