不知道这里有没有人用过layabox或者在用layabox做小游戏,因为在我看来用这个东西的人少之又少。 这个东西是用来做小游戏的,代码是用js/ts写的,所以我觉得它跟前端有关。
为什么写这个工具。
刚开始用layabox的时候用的layaAir这个工具来编译项目,具体的流程是当你在vscode改了代码之后需要到layaAir这个应用界面去点击编译按钮,点了之后它就会编译,编译完成之后你就可以去刷新浏览器看效果了,用更容易理解一点的描述就是你在写vue项目,改一行代码想要看效果就点一下build,然后完了之后刷新浏览器才能看到效果,加上当时我电脑不是很好,所以改一行代码要等半天,现在看来真是原始。
后来知道layabox有个自动监听文件修改并编译项目的工具,然后安装这个工具之后写一个脚本,监听项目目录自动编译项目,用了一段时间后发现其实跟上面差不多就是一个手动点击编译,一个自动编译,编译时间上差不多,而且这个工具兼容性不是很好,安装的时候就出了很多的幺蛾子,所以我对它的印象不是很好。
再后来就是用webpack了,layabox项目除了不用写html,css,代码不涉及dom,bom之外其他的都跟前端差不多,所以我就想到用webpack来打包,其实不久之前就有人出过这方面的教程了,只是我不知道而已,然后就配置webpack来编译,webpack是真的给力,确实比之前的编译工具快了不是一点半点,然后经过我的优化优化再优化,项目编译速度从之前的一两分钟缩减到了10秒一下,真是太爽了。
看到这里你们应该就知道这东西是多么落后了吧,我19年刚学前端的时候webpack都4.0了。
后来一直在用webpack,公司里的小伙伴们都觉得挺好用的,直到我无意间看博客看到了尤大大写的vite,当时给我的感觉就像是看到新大陆一样,不知道用这个工具该有多香。 说干就干,中间克服了很多问题,解决方式不是很优雅但终于能跑了,是非常的爽非常的快,但是有个问题也很致命,就是vite监听文件的时候会区分大小写,而vscode有时候导入文件不会区分大小写,这就导致有时候文件监听不到,snowpack也一样不行,虽然很喜欢,但是我还是决定不用它。
后面我想来想去上面的工具说到底就是不适合我们这个项目,那我为什么不自己基于esbuild为小游戏项目单独写一个构建工具了。
刚好那两天我比较空闲,于是就把这个工具写出了,非常的简单,用node建一个服务,然后监听项目文件的访问,在请求文件时返回一个经过esbuild处理过后的响应,然后监听项目文件夹,当文件修改的时候就重新构建一下。跑起来也没有任何问题,就是有点慢,虽然比webpack快了不少,但是对比webpack光快是不行的,我得做的更好。 于是我就优化优化再优化,除了在node端加缓存外我还在浏览器端添加了协商缓存,再在浏览器和node之间用ServiceWorker加上了缓存,这时速度优势就无法忽视了,我再包装原项目添加了用于提示用户代码有更新啦,需要刷新浏览器和当浏览器获得了焦点得时候再自动刷新浏览器的工具脚本,这个时候开发体验就很爽了。然后我自己测试了很多项目没问题后就发布成了npm包,安装包后只用在项目目录下执行一下命令项目就能跑起来了,代码有更新了也会自动提示和刷新浏览器,遵循越简单越好的原则。
最后总结一下这个工具的优点
最大的优点就是快,不需要任何配置,因为是为layabox量身打造的,开箱即用,1行代码1秒内就能把项目跑起来,而且不用等编译,任何时候刷新浏览器看到的都是最新的内容。 其次就是开发体验非常爽。
项目地址
作为程序员工作一年 第二个开源项目 欢迎指教。 因为马上我要就离职去干前端去了,这么好用的工具可不能白瞎了,所以在这里好好吹一下哈哈哈。