如何在Angular（esbuild）每次编译前执行脚本？

针对你的需求，以下是两种可靠的实现方式，覆盖单次构建和watch模式下的每次编译触发：

方案1：自定义esbuild插件（推荐，适配watch模式） #

利用esbuild的构建钩子，在每次构建启动前执行脚本，包括watch模式下文件修改后的重新构建。

1. 创建esbuild插件文件
   在项目根目录新建pre-build-plugin.js，内容如下：

   module.exports = {
     name: 'pre-build-hook',
     setup(build) {
       // 监听构建启动事件
       build.onStart(async () => {
         console.log('=== 执行前置脚本 ===');
         // 方式1：直接在插件内编写逻辑
         // 比如：修改文件、生成配置等
         // 方式2：调用外部独立脚本
         const { execSync } = require('child_process');
         execSync('node ./scripts/pre-build.js', { stdio: 'inherit' });
       });
     }
   };
   

   按需选择直接写逻辑或调用外部脚本，stdio: 'inherit'会把脚本的输出同步到终端。

2. 在angular.json中配置插件
   修改angular.json里的build和watch目标，添加esbuildPlugins配置：

   "architect": {
     "build": {
       "builder": "@angular-devkit/build-angular:application",
       "options": {
         "esbuildPlugins": ["./pre-build-plugin.js"],
         // 你的其他build配置（outputPath、index、browser等）
       }
     },
     "watch": {
       "builder": "@angular-devkit/build-angular:application",
       "options": {
         "watch": true,
         "esbuildPlugins": ["./pre-build-plugin.js"],
         // 你的其他watch配置
       }
     }
   }
   

3. 验证效果
   执行ng build或ng watch，每次构建（包括watch模式下文件修改后的自动构建）都会先执行你的前置脚本。

方案2：npm脚本钩子（仅适用于单次构建启动） #

如果只需要在ng build/ng watch命令启动时执行一次脚本，可以用npm的前置钩子：

修改package.json的scripts：

"scripts": {
  "prebuild": "node ./scripts/pre-build.js",
  "build": "ng build",
  "prewatch": "node ./scripts/pre-build.js",
  "watch": "ng watch"
}

注意：这个方法的局限性是，watch模式下仅在启动时执行一次脚本，文件修改后的后续编译不会触发。

注意事项 #

• 确保脚本路径正确，建议使用项目根目录相对路径。
• 如果脚本涉及异步操作，在esbuild插件中要使用async/await确保脚本执行完成后再开始构建。

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