【扩展】开发模式下，实时代码热重载

产品概述

代码热重载插件是一款专为 Cocos Creator 开发者设计的高效开发工具，让您在预览模式下实现 TypeScript 代码的实时热重载，无需重新编译整个项目，极大提升开发效率。

本插件允许您在游戏运行时实时修改代码逻辑，无需刷新浏览器即可自动重载修改内容，极大减少了开发预览耗时。

效果展示

热重载 demo 效果展示

专属特色

• 真正的代码 0 侵入，无需修改项目原有任何代码逻辑，即可体验重载（无需装饰器）。

• 修改代码逻辑，浏览器会立即触发修改内容重载，无需任何额外繁琐操作。

• 代码重载后，调试定位的文件也会更新为最新代码（编辑器看到的代码与浏览器中的代码保持一致，做到所见即所得）

• 采用引擎对修改内容代码进行编译，加载，杜绝编译差异导致的未知情况。

使用方式

Cocos Creator 2.x.x 版本（已测试 2.4.x 版本）

1. 将 cocos creator 插件（code_reload）导入到当前项目
2. 将插件下的 engine 目录拷贝到项目的 assets 目录下（具体位置可根据项目目录结构调整）
3. 将扩展包中的 __quick_compile__.js 文件，替换本地编辑器目录下的对应文件：
   • macOS: ...CocosCreator.app/Contents/Resources/app.asar.unpacked/editor/share/quick-compile/plugins/__quick_compile__.js
   • Windows: 请根据编辑器安装路径自行查找对应目录
4. 关闭编辑器自动刷新预览功能（设置 -> 预览运行 -> 自动刷新已启动的预览）。
5. 重启编辑器，即可体验代码热重载功能

Cocos Creator 3.x.x 版本（已测试 3.8.x 版本）

1. 将 cocos creator 插件导入到当前项目
2. 将插件目录下的 CodeHotReload.ts 脚本导入到项目中（assets 目录下）。
3. 关闭编辑器自动刷新预览功能（设置 -> 预览 -> 自动刷新）。
4. 重启编辑器，即可体验代码热重载功能

文件权限问题，导致运行不了，可以删除插件下的 node_modules 目录，重新 npm i 安装下依赖即可

重载范围

核心原则：重载逻辑，不修改数据

功能类型	支持状态
cc 组件类修改、新增（继承自 cc.Component）
普通类修改、新增
新模块引入
常量修改、新增、删除
非导出类修改、新增
静态单例
getter/setter 方法修改、新增
成员属性修改	（数据不支持修改）

核心特性

实时热重载

• 秒级响应：代码修改后自动完成重载，特别适用于战斗逻辑、动画效果、函数调整等复杂逻辑开发
• 精准更新：仅重载修改的文件，保证性能，避免整个项目重载导致的效率低下
• 数据保护：重载过程中不修改运行时数据，仅更新逻辑和常量

智能优化

• 批量处理：支持同时处理多个文件变更并进行重载
• 错误容错：完善的异常处理机制，确保开发过程稳定性

开发友好

• 简单配置：安装无需复杂配置，轻松上手，代码注释完整
• 零侵入性：插件仅在预览模式下生效，代码编译打包时会自动裁剪相关代码片段，放心引入项目使用
• 兼容性强：理论上支持所有 Cocos Creator 2.x 和 3.x 版本
• 调试支持：提供详细的日志输出，便于问题排查

适用版本

引擎版本	支持状态	备注
Cocos Creator 3.x.x		支持3.x.x - 3.8.7 所有版本
Cocos Creator 2.x.x		基于 2.4.x 版本开发和测试

商场地址

代码热重载

有什么 bug，欢迎大家留言反馈

好东西好东西

针不戳针不戳

实现原理是啥？

安裝後持續出現
runtime/CodeHotReload.ts 为起点找不到模块 “reflect-metadata”
需要協助排查下, 3.8.6 與 3.6.3 都有遇到

插件用的 3.8.7 模版开发测试的，和之前版本有些区别，导致无法向下兼容。

但其核心实现逻辑是一样的，调整下插件适适配，没问题了。

晚点我这边整一个 3.x 的通用版本。

核心逻辑：文件监听，编译代码，加载编译后的代码模块，处理代码模块依赖关系，原型链逻辑覆盖

东西是真不错

感谢支持

目前还不是稳定版本，会有一些兼容问题，或者一些没有测试到的地方。

这边会持续更新优化，目前折扣将持续到稳定版本之前。

感谢大家的支持。

期待更新

3.8.7也有找不到模块 “reflect-metadata”问题

我也出现了

没有联系方式吗

紧急更新，新版本审核中，更新内容：

• 修复运行报错无法重载

• 扩展 cocos 版本兼容能力，兼容更多的版本

• 删除对装饰器的使用，降低使用成本

• 调整日志打印

感谢大家的支持

mark​

我这边执行 npm i 后报错了，帮忙看下怎么解决：
PS E:\workspace\gddfw\client_chj\projects\tzgame_main_chj\extensions\code 热重载> npm i
npm error code 1
npm error path E:\workspace\gddfw\client_chj\projects\tzgame_main_chj\extensions\code 热重载\node_modules\nsfw
npm error command failed
npm error command C:\Windows\system32\cmd.exe /d /s /c node-gyp rebuild
npm error gyp info it worked if it ends with ok
npm error gyp info using node-gyp@10.1.0
npm error gyp info using node@20.15.1 | win32 | x64
npm error gyp info find Python using Python version 3.8.9 found at “D:\Users\DHXM\AppData\Local\Programs\Python\Python38\python.exe”
npm error gyp ERR! find VS
npm error gyp ERR! find VS msvs_version not set from command line or npm config
npm error gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm error gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with ‘–loglevel silly’ for more details.
npm error gyp ERR! find VS
npm error gyp ERR! find VS Failure details: undefined
npm error gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with ‘–loglevel silly’ for more details.
npm error gyp ERR! find VS
npm error gyp ERR! find VS Failure details: undefined
npm error gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with ‘–loglevel silly’ for more details.
npm error gyp ERR! find VS
npm error gyp ERR! find VS Failure details: undefined
npm error gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with ‘–loglevel silly’ for more details.
npm error gyp ERR! find VS
npm error gyp ERR! find VS Failure details: undefined
npm error gyp ERR! find VS not looking for VS2015 as it is only supported up to Node.js 18
npm error gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
npm error gyp ERR! find VS
npm error gyp ERR! find VS **************************************************************
npm error gyp ERR! find VS You need to install the latest version of Visual Studio
npm error gyp ERR! find VS including the “Desktop development with C++” workload.
npm error gyp ERR! find VS For more information consult the documentation at:
npm error gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
npm error gyp ERR! find VS **************************************************************
npm error gyp ERR! find VS
npm error gyp ERR! configure error
npm error gyp ERR! stack Error: Could not find any Visual Studio installation to use
npm error gyp ERR! stack at VisualStudioFinder.fail (D:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:116:11)npm error gyp ERR! stack at VisualStudioFinder.findVisualStudio (D:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:72:17)
npm error gyp ERR! stack at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
npm error gyp ERR! stack at async createBuildDir (D:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:95:26)
npm error gyp ERR! stack at async run (D:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js:81:18)
npm error gyp ERR! System Windows_NT 10.0.19045
npm error gyp ERR! command “D:\Program Files\nodejs\node.exe” “D:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js” “rebuild”
npm error gyp ERR! cwd E:\workspace\gddfw\client_chj\projects\tzgame_main_chj\extensions\code 热重载\node_modules\nsfw
npm error gyp ERR! node -v v20.15.1
npm error gyp ERR! node-gyp -v v10.1.0
npm error gyp ERR! not ok

我使用上仍有一些問題已私信，能請作者撥空幫忙看看嗎

以上问题安装 Build Tools for Visual Studio 2022 后，再安装依赖就可以，完美解决