V7投稿 | vscode插件< cocosAutomaticRefresh > 保存代码自动刷新运行游戏 / 开发更省心

Creator 2.x 扩展插件
#1

前言：
平常开发时如果修改后 tab 切换 到 cocos 的编辑器 才能刷新运行时的游戏，在需要调整的界面的时候这很方便，但是有些时候我们是只想调整逻辑的，在这个时候无用的tab切换会显得多余，cocos 文档里也提供了相关的文档去解决：https://docs.cocos.com/creator/manual/zh/scripting/coding-setup.html?h=vs%20code 。但是以文档的使用还是不太方便（特别是多项目的时候），因为所以，搞了个一个更方便的vscode 插件：cocosAutomaticRefresh，一键使用,支持手动开启关闭（默认开启）、支持自定义端口，默认7456，兼容2.x 和3.x。

原理：
插件主要做了两个事情。

1、配置
image
2、检测自动保存 win则是 ctrl + s, mac 则是 cmd + s，
检测到后依次调用 ：
1、http://localhost:${默认7456，可以自己配}/asset-db/refresh //cocos 内部提供的3x接口，如果不成功则 调用2

2、http://localhost:${默认7456，可以自己配}/update-db //cocos 内部提供的2x接口，如果不成功则跳过

接口以http get的形式发送，发送成功后cocos内部会自动处理刷新，如果文件没有变化，发送了以上接口cocos也不会刷新的。

代码仓库 ：https://gitee.com/Z2105873459/cocos-automatic-refresh/commit/ebd5cb2234c5cdc320e6371eeb1065eb44ff364b

欢迎尝试，有问题 可以在此帖评论。

5赞
【活动】投稿结束｜Cocos 第 7 期社区征稿正式开启！不限2D、3D
新一代代码刷新预览工具！！
【活动】投稿结束｜Cocos 第 7 期社区征稿正式开启！不限2D、3D
#2

6666666 :partying_face: :partying_face:

#3

必须赞一个

#4

提供另一种方式，3.x

代码在压缩包中
新建文本文档.zip (740 字节)

image
将上述代码添加到预览模版的index.ejs中。
image
界面就会刷新了

#5

可以的，方式千千万

#6

在你的基础上总结了一个简洁版，正常方式刷新网页就可以刷新代码

if (DEV && !EDITOR) {
    window.onbeforeunload = function () {
        // 在这里处理页面刷新前的逻辑
        try {
            fetch(`${window.location.href}asset-db/refresh`);
        } catch (error) {
            console.log(error);
        }
    };
}
1赞
#7

这样也很好

#8

再提供一种方案
vscode 安装 Run on Save插件，然后修改配置

    "emeraldwalk.runonsave": {
        "commands": [
            {
                "match": ".*",
                "isAsync": true,
                // 3.x 自动刷新地址
                // 2.x 请修改为 curl http://localhost:7456/update-db 
                "cmd": "curl http://localhost:7456/asset-db/refresh"
            }
        ]
    }
2赞
#9

效果是行的，但这样网页会刷两次

要什么都不处理的简洁代码可以这样

<button onclick="refreshScript()">刷新代码</button>
<script>
	function refreshScript() {
		fetch(`${window.location.href}asset-db/refresh`);
	}
</script>
#10

这样端口只限制了7456，不知道有没有动态调整端口的写法

#11

这样也很好

编辑器外触发刷新资源的小工具
#12

很好用 :100:

#13

插件功能更新：
问题描述：

目前插件去触发cocos编译操作还存在有问题，部分开发者在写代码习惯反复ctrl + s去保存代码，由于旧版本的触发流程是每次都发，这会导致一些新的问题，

比如：

1、反复触发cocos编译器的操作，你的运行环境刷新了但是还是旧代码，这个问题是cocos的内部问题，频繁刷新导致的。
2、反复触发cocos编译器的操作，会导致电脑卡顿。
在不同的开发场景里，有部分开发者希望在不返回cocos编译器但是又不想运行环境刷新，这种情况更希望又开发者自己来手动控制何时刷新。

由此插件修改如下：

1、开了自动刷新的，对于代码的保存操作，增加防抖控制，例如在500 ms内的反复保存操作，只会触发最后一次cocos编译操作。

2、增加手动控制刷新,依然加了500 ms的防抖(注意！！！！手动刷新的图标在点开任意文件后的右上角中！！！！！)

#14

recording 为什么焦点回到编辑器会触发一次刷新

#15

本质上这个插件就是代替你之前需要焦点到编译器去触发刷新，这只调试逻辑的时候非常方便，这个正常的

#16

如果可以支持多端口就好了，方便开多个项目测试的时候用

#17

这是一个很好的想法