Skip to content

热模块替换

本指南旨在帮助你使用VSCode进行神岛项目的调试,特别是如何利用模块热替换(HMR)编译功能来提升调试效率。通过HMR,你可以在编辑代码时实现自动编译,并即时将更新上传至神岛编辑器,从而大大加速调试和测试流程。

如何操作HMR服务器

开启服务器

在VSCode的左下角,你可以找到HMR服务器的状态指示。若服务器未开启,请点击启动HMR服务器按钮。系统将自动读取webpack配置并启动服务器。

  • 图标颜色:橙色(表示服务器未启动)

HMR服务器启动图标

开启后,HMR服务器将监听文件修改,并自动进行编译和上传。

重启/关闭服务器

若已启用服务器,你可以通过点击相同位置的按钮来关闭或重启服务器。

  • 图标颜色:绿色(表示服务器已启动并正常工作)

HMR服务器重启/关闭图标

服务器异常处理

有时,HMR服务器可能会因各种原因停止运行。此时,图标将变为红色,并显示相应的错误信息。

  • 图标颜色:红色(表示服务器异常停止)

HMR服务器异常图标

注意事项

监听范围与方式

  • HMR服务器仅监听serverclient目录下的入口文件。一旦这些文件发生变动,服务器将立即触发编译流程。
  • 非监听文件(如node_modulesdistwebpack.config.js等)的修改不会触发编译。

配置文件管理

  • 在启动HMR服务器之前,请确保所有相关配置文件(如webpack.config.jsdao3.config.jsontsconfig.json)已正确配置。
  • 若在HMR服务器运行后修改配置文件,你需要重启服务器才能使更改生效。

别名差异

  • 在完整编译流程中,项目文件通常被编译成多个小模块的JavaScript文件,并放置在dist文件夹中。此时,文件路径将基于tsconfig.js中的rootDir属性。
  • 在HMR编译流程中,文件将从当前所在的serverclient文件夹中读取,而不是从dist文件夹中读取。

神岛账户配置

  • 在开启HMR服务器之前,请确保你已登录神岛账号并配置了地图。某些功能(如数据上传)可能依赖于这些配置。
  • 若未登录或未配置,可能会影响到数据的上传和同步。

多工作区支持

  • 在多工作区环境中,你可以在各自工作区分别开启HMR服务器。系统将自动判断当前工作区,并加载相应的配置文件。