#### 购买资源前建议先联系作者确认，这个技术目前还不能解决全部重载问题，只能解决大部分场景下使用！！！ ## 运行效果 #### 函数替换修改执行按钮的点击逻辑，**不需要刷新页面**，对应的点击逻辑变化
![0.gif](https://download.cocos.com/CocosStore/markdown/933b258a654744c09902531195a7147b/933b258a654744c09902531195a7147b.gif) #### 函数新增原本没有testFunc函数，**不需要刷新页面**，动态增加这个函数并调用。
![1.gif](https://download.cocos.com/CocosStore/markdown/88c880f345f0439694a0073173f00b8a/88c880f345f0439694a0073173f00b8a.gif) #### 内置函数替换原本已经有update函数，不断修改update函数的逻辑，**不需要刷新页面**，就可以修改方块的运动。
![2.gif](https://download.cocos.com/CocosStore/markdown/c9548a59f1f84cd0897399d8ec9534a5/c9548a59f1f84cd0897399d8ec9534a5.gif) ## 使用场景在开发的时候，我们需要不断的调试。每一次修改代码都需要重新刷新页面，对于简单的界面或许影响不大。但是随着项目不断壮大，可能一个页面的调试需要走很长的流程来获取充足的数据才能开一个界面。例如需要调试战斗页面，需要玩家登录→进入大厅→匹配→...，要走完这一系列流程才能打开对应的界面看函数的执行效果。但是如果能够热重载，那么就不需要走前面的流程，可以直接看到函数修改的效果。 ## 热重载实现方式 1. 整个模块重新加载。把需要重载的模块卸载，然后读取新的模块的代码，放入缓存中。但是这种方法很难保持上下文一致并且旧的模块如果被直接引用了，很难完全清理旧模块。 2. 基于函数替换的热重载。通过语法分析获取新代码的函数，一个一个函数把旧模块的函数替换。这种方法就能够保持上下文，同时不需要重启就可以直接生效。 ## 原理看下图的示例，执行test函数，它会打印bbb。也就是说aaa函数的代码已经被bbb函数替换了。
![test.png](https://download.cocos.com/CocosStore/markdown/991c4e2d2fb140b7b89aca70a1a0b7d9/991c4e2d2fb140b7b89aca70a1a0b7d9.png)
那么要实现热重载，我们只需要把新旧代码都获取到，然后用新代码把旧代码函数替换掉。 ## 实现 1. 实现插件监听代码的变化，代码发生变化就自动把ts编译成js保存到./library/reloadCode目录下。 2. 把发生变化的文件记录下来，同时记录下变化的时间。 3. 触发重载时，把上一次重载时间往后修改的文件全部获取，然后读取新的代码。 4. 通过语法分析（这里不是说真的写出语法分析器，只需要按自己的方法获取到函数的代码即可）获取新的函数代码逐个覆盖掉旧的函数即可。 5. 替换掉了函数再把一些导入的模块引入作用域即可。 ## 使用 1. 安装node和tsc模块 2. 监听所有ts文件代码的变化。例如：tsc -w D:\CocosProject\m1\m1\assets\script\dlg\dlgcom\GameDlgCom.ts --outDir D:\CocosProject\m1\m1\library\reloadCode -t ES2017 3. 拓展管理器启动插件
![I0SRO_HO5VW4O7D_~B8X.png](https://download.cocos.com/CocosStore/markdown/70d453d2647b43c193186231218185d4/70d453d2647b43c193186231218185d4.png) 4. 打开main场景运行，然后就可以修改代码保存，点重载按钮让代码实时修改。 ## 开发环境 - 引擎版本：Cocos Creator 3.6.1 - 编程语言：TypeScript - node 14.19.3 - tsc 4.9.3 ## 已适配平台 |H5|微信小游戏|Android原生|iOS原生|抖音小游戏|OPPO小游戏|vivo小游戏| |-|-|-|-|-|-|-| |✔|✘|✘|✘|✘|✘|✘| ## 不足这种重载方式能满足开发中绝大部分的功能调试，但是有一些情况无法重载。 1. 函数的强引用。如果开发的时候把回调函数直接传入，那么替换以后，回调调用的还是旧函数。如下图中的this.onReload函数是不能够热重载的。应该调整为下图中执行按钮的Functor非强引用写法。 ![LH4AQ2YZB8LGS3_M03JG.png](https://download.cocos.com/CocosStore/markdown/b23861c98df6464f892edf082b1af10c/b23861c98df6464f892edf082b1af10c.png) 2. 函数里含有supper关键词的函数无法热重载。 3. static函数无法热重载 4. 热重载不会重新走一遍逻辑，只会保持之前的上下文继续执行下去。如果你的逻辑写在start函数中，start函数重载以后，不会重新调用一次start函数，需要自己主动调用一次。 5. 挂载的脚本必须要在代码主入口中有import才能热重载。 ## 常见问题 1. 一些import的模块可能会缺失，那么需要事先在CodeReoladTool.init函数中添加这些模块。 ![image.png](https://download.cocos.com/CocosStore/markdown/e3709d14c63c4b55a573b66e6458907c/e3709d14c63c4b55a573b66e6458907c.png) 2. 代码修改之后，重载不生效。此时需要检查./library/reloadCode是否有file.json文件，还有是否有生成的js代码。如果有那么看看tsc的cmd命令行是否还在运行。如果也正常，可以取消这段注释查看具体报错。 ![image.png](https://download.cocos.com/CocosStore/markdown/6917e030e08c479e86a947f06a90358b/6917e030e08c479e86a947f06a90358b.png) ## 联系作者微信：devzhl
![e822ef592a90e1b9f4a1ca5ef717066.jpg](https://download.cocos.com/CocosStore/markdown/84137ebc58914a10b033f4559dce069e/84137ebc58914a10b033f4559dce069e.jpg) ## 商店其他源码 [《绯色神域》ai生成的卡牌回合制游戏](https://store.cocos.com/app/detail/5368)
[python游戏分布式强连接框架](https://store.cocos.com/app/detail/5140)
[文字斗争](https://store.cocos.com/app/detail/4874)
[游戏开发集成工具](https://store.cocos.com/app/detail/4929)
[消消乐（PC、安卓、H5）益智类项目展示+完整项目源码](https://store.cocos.com/app/detail/5050)
[搞心态小游戏-闯关类](https://store.cocos.com/app/detail/5187)
[基于函数替换的热重载](https://store.cocos.com/app/detail/5420)
## 购买须知本产品为付费虚拟商品，一经购买成功概不退款，请在购买谨慎确认购买内容。