本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规。大家都是程序员,不要闹得不开心。

本文中,苏南大叔介绍一个electron开发神器,叫做electron fiddle。苏南大叔觉得,如果代码简单,electron fiddle这款软件可以替代vscode,用来编写electron程序。使用手感是非常的顺滑。官方对于electron fiddle的目前定位是:验证工具,用于验证某些代码使用的,和最终的编辑器终极目标还是有一定的差距的。

苏南大叔:如何测试electron版本差异性?Electron Fiddle如何使用? - electron-fiddle
如何测试electron版本差异性?Electron Fiddle如何使用?(图13-1)

本文测试环境:win10electron fiddle@0.23.1node@14.16.0

electron fiddle软件下载

这款软件的下载地址是:

分操作系统版本的话,下载地址:

具体要下载那款具体的版本,要看具体的使用环境了。x64x32arm 或者 intel芯片之类的,具体的指令集选择,大家根据自己的情况自行考虑下载。

苏南大叔:如何测试electron版本差异性?Electron Fiddle如何使用? - electron-fiddle-github
如何测试electron版本差异性?Electron Fiddle如何使用?(图13-2)

github上面也是有这款软件的源码的,大家可以拿来观摩学习。地址是:

可下载的electron版本

在软件的左上角,可以切换可以下载的electron的各个版本。默认的版本列表不展示历史上的过期版本,还展示了测试中的Beta版本。

苏南大叔:如何测试electron版本差异性?Electron Fiddle如何使用? - electron-version-list2
如何测试electron版本差异性?Electron Fiddle如何使用?(图13-3)

但是,苏南大叔也会偶尔关心一下已经过时的版本,比如:electron@5,这个列表中就是没有显示的。因此,苏南大叔修改了一下相关设置,如下图所示:

苏南大叔:如何测试electron版本差异性?Electron Fiddle如何使用? - electron-version-list
如何测试electron版本差异性?Electron Fiddle如何使用?(图13-4)

修改之后,就可以显示Obsolete的版本了。而且,对于测试版本,苏南大叔不是很关心,所以,苏南大叔选择不显示BetaNightly版本。这个操作感官就像是操作写安卓程序的时候,下载android各个版本的手感。

当然,下方有几个按钮,别乱按。里面有个download all versions,按一下就下载所有的版本了,没有后悔的余地。除非,你主动把electron fiddle关掉。

加速electron版本的下载

如果切换的当前版本还没有下载过的话,会自动切换到下载状态。但是!默认情况下,下载是很慢的。这个问题的话,可以参考苏南大叔写过的下面的这个文章:

总的原则就是这样的,不仅要修改npm配置文件中的electron-mirror,还同时需要修改对应的全局环境变量。否则,下载过程就会非常的漫长痛苦。

npm config set registry https://registry.npm.taobao.org/
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

记得还要设置全局环境变量ELECTRON_MIRRORwin10下如下图所示:

苏南大叔:如何测试electron版本差异性?Electron Fiddle如何使用? - electron-fiddle-mirror
如何测试electron版本差异性?Electron Fiddle如何使用?(图13-5)

下载好的electron各个版本,是存放在下面这个位置的:

C:\Users\{用户名}\AppData\Roaming\Electron Fiddle\electron-bin

苏南大叔就测试了win10mac等系统下面,这个路径暂时未知。

苏南大叔:如何测试electron版本差异性?Electron Fiddle如何使用? - electron-bin-path
如何测试electron版本差异性?Electron Fiddle如何使用?(图13-6)

编辑的对象

默认情况下,electron fiddle打开后,会展示四个可编辑的文件。分别是:main.js,index.html,renderer.js,preload.js。这四个文件是默认一组的。

苏南大叔:如何测试electron版本差异性?Electron Fiddle如何使用? - editor-all-files
如何测试electron版本差异性?Electron Fiddle如何使用?(图13-7)

如果关闭了某个文件,比如:inddex.htmlelectron fiddle在运行的时候,就可能会找不到对应的文件哦,这个不是很智能,对吧?所以,在编辑某个项目的时候,尽量不要关闭某个文件,而是要选择把对应的对话框调整到一边,不显眼的角落。比如,下面的截图中,关闭了index.html后,再运行,就显示:

Not allowed to load local resource

苏南大叔:如何测试electron版本差异性?Electron Fiddle如何使用? - electron-fiddle-error
如何测试electron版本差异性?Electron Fiddle如何使用?(图13-8)

如果保存的话,也是制定一个文件夹后,把界面上的所有文件都保存到一个文件夹里面去。如果想编辑以往的项目的话,也是需要打开对应的文件夹的,软件开始启动的时候,显示的仅仅是默认的一组代码,并不是你上一次编辑的对应程序。所以,非第一次打开软件的你,可能需要个“文件=》打开”动作。当然,也会需要一个“文件=》保存”的动作,保存的是这一组文件。

苏南大叔:如何测试electron版本差异性?Electron Fiddle如何使用? - electron-open-project
如何测试electron版本差异性?Electron Fiddle如何使用?(图13-9)

如果您有自己定义的其他文件需要编辑的话,是需要在上面的编辑位置,去主动添加对应的文件的。例如,下面的截图,是添加一个新的自定义模块。

苏南大叔:如何测试electron版本差异性?Electron Fiddle如何使用? - electron-fiddle-new-file
如何测试electron版本差异性?Electron Fiddle如何使用?(图13-10)

这里,其实有个比较大的问题,就是上面的文件列表里面,点击哪些自定义的文件的话,比如index2.html之类的非默认文件的话,可能会导致代码丢失。自行实验哦!

自动下载第三方模块

这款electron fiddle,还有个非常不错的功能,就是会自动下载第三方模块。就是说:不但不需要手工下载electron了,还不需要手工执行npm install了,只需要在代码中写出对应的require语句,就可以自动识别并且下载了。是不是非常的智能?

苏南大叔:如何测试electron版本差异性?Electron Fiddle如何使用? - electron-fiddle-auto-install-module
如何测试electron版本差异性?Electron Fiddle如何使用?(图13-11)

大家只需要正常写require语句即可,根本不用关心模块的安全。

var test = require('第三方模块名字')

这个electron fiddle设置里面,还可以切换是使用npm还是yarn。目前来说,苏南大叔觉得npm挺好用的,yarn这款大家极力推崇的安装方案,对于苏南大叔来说,并没有什么吸引力。

苏南大叔:如何测试electron版本差异性?Electron Fiddle如何使用? - electron-fiddle-npm
如何测试electron版本差异性?Electron Fiddle如何使用?(图13-12)

运行后再关闭会自动删除第三方包

electron fiddle会非常智能的下载第三方包,但是,当你关闭当前的测试程序的时候,它也会把这些第三方包给删除掉。下次再运行的时候,就会再次下载,这就很痛苦了。是吧?

但是每次run的时候,都要重新下载对应的package,这些包不能持久化,这个似乎有些不合理。同时,也不能识别项目根目录下面的node_modules文件夹。官方的issue里面,也暂时没有解决这个问题,描述为一个功能增强issue

苏南大叔:如何测试electron版本差异性?Electron Fiddle如何使用? - enhancement-issue
如何测试electron版本差异性?Electron Fiddle如何使用?(图13-13)

相关链接

总结

Electron Fiddle整体来说,要给出五星好评。毕竟切换electron的版本号,做版本对比实验的话,是非常方便的。其他的功能,还是有些瑕疵的。如果您是第一次入手electron的话,还是从quick start开始比较好,否则可能基础不稳。你觉得呢?

本文这里,就是抛砖引玉。Electron Fiddle还有很多问题,可以大家注意,期待苏南大叔的后续文章吧。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。