Extension.js项目中实现public目录文件热更新的技术方案

背景介绍

在基于Extension.js构建浏览器扩展时，开发者有时需要引入自定义JavaScript文件或其他静态资源。这些资源如果放置在scripts目录下会被Webpack处理，可能导致与现有构建系统的冲突；而放在public目录虽然能避免构建问题，却失去了热更新能力。

问题分析

当开发者将自定义JS文件放在scripts目录时，会遇到$RefreshSig$ is not defined错误。这是因为Webpack的React Fast Refresh特性会尝试处理这些文件，而它们可能不符合模块化规范。将文件移至public目录可以解决构建问题，但每次修改都需要完全重启浏览器才能生效，极大降低了开发效率。

解决方案

Extension.js项目通过修改CopyPublicFolder插件实现了public目录的热更新功能。核心改动是在文件监听器中添加了change事件处理：

watcher.on('change', (filePath: string) => {
  const target = path.join(output, path.relative(projectPath, filePath))
  this.copyFile(filePath, target)
})

实现原理

1. 文件监听机制：使用chokidar库监听public目录下所有文件的变化
2. 增量复制：当检测到文件变更时，只复制发生变化的单个文件而非整个目录
3. 路径映射：保持源文件与目标文件的相对路径一致性
4. 无缝集成：与现有构建系统协同工作，不影响其他功能

实际效果

这一改进使得开发者能够：

• 将自定义JS文件放入public目录
• 修改后自动触发浏览器扩展重载
• 无需手动重启浏览器
• 保持与Webpack构建系统的隔离

最佳实践

对于Extension.js项目中的资源管理，建议：

1. 核心业务逻辑放在scripts目录，享受完整的Webpack生态
2. 第三方库或独立脚本放在public目录
3. 静态资源如图片也适合放在public目录
4. 复杂场景可考虑自定义Webpack配置

总结

这一改进显著提升了Extension.js项目的开发体验，特别是对于那些需要集成外部脚本或资源的场景。通过简单的监听机制实现了public目录的热更新，既保持了构建系统的稳定性，又提供了必要的开发便利性。