如何在esbuild的watch模式下添加成功日志

esbuild作为一款高性能的JavaScript打包工具，其watch模式在开发过程中非常实用。然而，默认情况下，esbuild的watch模式只会在构建失败时输出错误信息，而不会在构建成功时给出明确提示。这可能导致开发者难以判断当前构建状态，特别是当之前存在过错误但已被修复的情况下。

问题背景

在开发过程中，开发者经常会遇到这样的情况：修复了一个构建错误后，控制台仍然显示着之前的错误信息，无法直观地确认当前是否构建成功。这种不确定性会影响开发体验和效率。

解决方案

esbuild提供了插件系统，我们可以通过编写一个简单的插件来监听构建结束事件，并根据构建结果输出相应的日志信息。

实现步骤

1. 创建一个自定义插件，监听onEnd事件
2. 在事件回调中检查构建结果的errors数组
3. 根据错误数量输出相应的日志信息

示例代码

import * as esbuild from 'esbuild';

// 定义watch插件
let watchPlugin = {
  name: 'watch-plugin',
  setup(build) {
    build.onEnd(result => {
      if (result.errors.length > 0) {
        console.log(`构建失败，共发现${result.errors.length}个错误`);
      } else {
        console.log('构建成功！');
      }
    })
  },
}

// 创建esbuild上下文
let ctx = await esbuild.context({
  entryPoints: ['src/app.js'],
  bundle: true,
  minify: false,
  sourcemap: true,
  outfile: 'public/bundle.js',
  define: {
    'process.env.NODE_ENV': "'development'"
  },
  plugins: [watchPlugin], // 添加我们的插件
});

// 启动watch模式
await ctx.watch();
console.log('开始监听文件变化...');

进阶优化

上述基本实现可以满足大多数需求，但我们还可以进一步优化：

1. 添加时间戳：在日志中显示构建时间，便于追踪
2. 区分开发和生产环境：根据环境变量调整日志详细程度
3. 彩色输出：使用chalk等库让成功和失败日志显示不同颜色
4. 构建统计：显示构建耗时、输出文件大小等信息

import chalk from 'chalk';
import * as esbuild from 'esbuild';

let watchPlugin = {
  name: 'enhanced-watch-plugin',
  setup(build) {
    let startTime;
    
    build.onStart(() => {
      startTime = Date.now();
      console.log(chalk.blue('开始构建...'));
    });
    
    build.onEnd(result => {
      const duration = Date.now() - startTime;
      if (result.errors.length > 0) {
        console.log(chalk.red(`构建失败 (${duration}ms)，共发现${result.errors.length}个错误`));
      } else {
        console.log(chalk.green(`构建成功！耗时${duration}ms`));
        if (result.metafile) {
          const bytes = result.metafile.outputs['public/bundle.js'].bytes;
          console.log(chalk.green(`输出文件大小: ${(bytes / 1024).toFixed(2)}KB`));
        }
      }
    });
  },
};

注意事项

1. 插件应该在开发环境中使用，生产环境构建通常不需要这些日志
2. 过多的日志输出可能会影响性能，特别是在频繁构建的情况下
3. 确保错误信息仍然能够清晰可见，不要被成功日志淹没

通过这种方式，开发者可以清晰地了解每次构建的状态，大大提升开发体验和效率。esbuild的插件系统非常灵活，开发者可以根据自己的需求定制各种构建日志和行为。