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

在Extension.js项目中，开发者有时会遇到需要引入自定义JavaScript脚本或其他静态资源的需求。这些资源可能由于特殊原因无法通过Webpack直接打包处理，但同时又希望能够享受到开发时的热更新功能。

问题背景

当开发者将自定义JS脚本放在项目的scripts目录下时，Webpack会默认对这些文件进行处理，这可能导致一些意外的错误，比如出现$RefreshSig$ is not defined的错误提示。这是因为Webpack的刷新机制会尝试处理这些文件，而实际上它们可能已经通过其他方式进行了打包。

另一种选择是将这些文件放在public目录下，这样可以避免Webpack的处理，但随之而来的问题是：public目录下的文件变更不会触发浏览器的自动刷新，开发者需要手动重启浏览器才能看到修改后的效果。

解决方案

Extension.js项目通过修改CopyPublicFolder插件实现了对public目录文件变更的监听功能。核心思路是：

1. 在开发模式下，为public目录建立一个文件监听器(watcher)
2. 当检测到public目录下的文件发生变化时，自动将变更的文件复制到输出目录
3. 触发浏览器的自动刷新机制

具体实现上，在CopyPublicFolder插件中添加了对'change'事件的监听处理：

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

技术意义

这一改进为开发者带来了以下好处：

1. 开发效率提升：不再需要手动刷新浏览器即可看到public目录下文件的修改效果
2. 灵活性增强：开发者可以自由选择将特殊处理的文件放在public目录，而不必担心失去热更新功能
3. 兼容性保持：不影响原有Webpack对scripts目录的处理逻辑

最佳实践

对于Extension.js项目的使用者，建议：

1. 对于需要特殊处理或已经单独打包的JavaScript文件，可以放置在public目录下
2. 常规的业务逻辑代码仍然推荐放在scripts目录下，以享受完整的Webpack生态支持
3. 静态资源如图片、字体等也可以利用public目录的热更新功能

这一改进使得Extension.js在保持轻量级的同时，为开发者提供了更完善的开发体验，特别是对于那些需要混合使用不同构建工具或特殊处理资源的复杂项目场景。