如何在Vite插件中触发Rollup的watchChange钩子？

问题描述 #

现有Vite插件可跟踪buildStart和buildEnd阶段，但watchChange钩子在修改配置中inputs字段指定的文件时无法输出日志；同时需要新增用户修改文件后的重新编译时间跟踪功能。

解决方案 #

以下是修复并增强后的插件代码，解决watchChange不触发问题，同时实现重新编译耗时统计：

let endTime = null;
let rebuildStartTime = null;

function MyPlugin() {
  let isFirstBuild = true;

  return {
    name: 'my-plugin',
    buildStart() {
      if (isFirstBuild) {
        console.log('首次构建启动');
        isFirstBuild = false;
      } else {
        rebuildStartTime = new Date();
        console.log('重新构建启动');
      }
    },
    watchChange(id) {
      console.log(`检测到文件修改: ${id}`);
    },
    buildEnd() {
      endTime = new Date();
      if (rebuildStartTime) {
        const duration = endTime - rebuildStartTime;
        console.log(`重新编译完成，耗时: ${duration}ms`);
        rebuildStartTime = null;
      } else {
        console.log('首次构建完成');
      }
    },
    // 可选：添加额外文件监听（如果默认未覆盖）
    configureServer(server) {
      server.watcher.add('src/**/*.{js,ts,vue}');
    }
  };
}

export default MyPlugin;

关键说明 #

• watchChange触发修复：确保修改的文件在Vite默认监听范围内（如src目录下的源码文件），若需监听额外文件，通过configureServer中的server.watcher.add添加匹配规则。
• 重新编译时间统计：通过isFirstBuild标记区分首次构建与重新构建，仅在重新构建时记录开始时间，buildEnd阶段计算并输出耗时。
• 钩子执行逻辑：开发模式下，文件修改触发热更新时，watchChange会先触发，随后buildStart和buildEnd依次执行，完成时间统计。

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