如何测试electron版本差异性？Electron Fiddle如何使用？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

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

本文测试环境：win10，electron fiddle@0.23.1，node@14.16.0。

electron fiddle软件下载

这款软件的下载地址是：

• https://www.electronjs.org/fiddle

分操作系统版本的话，下载地址：

• windows系统： https://www.electronjs.org/fiddle?windows=1
• macos系统：https://www.electronjs.org/fiddle?mac=1
• Linux系统：https://www.electronjs.org/fiddle?linux=1

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

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

• https://github.com/electron/fiddle

可下载的electron版本

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

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

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

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

加速electron版本的下载

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

• https://newsn.net/say/electron-mirror.html

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

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

记得还要设置全局环境变量ELECTRON_MIRROR，win10下如下图所示：

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

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

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

编辑的对象

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

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

Not allowed to load local resource

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

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

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

自动下载第三方模块

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

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

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

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

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

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

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

• https://github.com/electron/fiddle/issues/530

相关链接

• https://newsn.net/say/electron-quick-start.html
• https://newsn.net/say/electron-mirror.html

总结

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

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

• https://newsn.net/tag/electron/

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