electron开发避坑

electron开发记录

公司需要开发一个小工具，来提高工作效率；大致功能如下

获取鼠标选取内容–服务器查询选取内容–弹窗显示查询结果

有点类似utools的超级面板。

分配给我这个任务的前辈推荐我使用electron进行桌面应用开发，因为electron应用具有跨平台性，而且electron开发只需要使用html+css+js这一套，学习成本比较低。

1、环境搭建

电脑：mbp2021-m1

node：v12.22.5

npm：6.14.14

electron简单理解就是一个工具包（个人理解的工具包：工具属性的代码包）。这个工具包能让你使用 前端技术 来开发跨平台桌面应用。

electron将chromium和nodejs合并到一个运行时环境，所以就需要电脑中有node环境。我使用的是12的版本，这是上一个长期维护版本，也是我同事推荐使用的。

npm（Node Package Manager）是一个nodejs的包管理工具。npm会随着Node.js自动安装，所以不用担心npm的版本问题。

环境安装好后就可以尝试一下electron开发一个helloworld了

https://www.electronjs.org/docs/tutorial/quick-start

如果你是node开发新手，一定要弄明白package.json这个文件。一个node项目的所有参数配置都在这个文件中，最好是每个标签都弄明白，开发过程中有一部分奇怪的问题都是这个文件导致的。

2、electron

我个人觉得弄明白一个技术再去开发会很舒服，虽然效率可能会比较低，但是我喜欢。

所以开发的第二步就是弄明白electron的原理，至少把最基础的一些知识点弄明白。

electron有两种进程：主进程，渲染进程

这个其实很好理解，electron是结合了chromium和nodejs的。nodejs肯定就主要负责app功能部分喽，chromium肯定就主要负责用户界面部分喽。主进程可以简单理解为nodejs使用的进程，渲染进程就是chromium使用的进程。

我几乎没用过渲染进程，不太了两种进程之间的区别和联系，这里贴个链接，感觉讲的蛮详细的。

https://www.jianshu.com/p/73e8a6ce0798

3、依赖问题

开发就避免不了依赖别人写的包，包的依赖问题属实是把我整疯了。

3.1 下载包

下包不多说了，有条件就用npm，不要和我说什么有cnpm，npm绝对比cnpm好用，反正我是这么感觉的。

所谓cnpm就是China-npm。就是个国内镜像，让你用在国内能飞快的下包。

但墙裂建议用npm，能避免不少问题。

3.2 依赖冲突

这里说的依赖冲突是指，不同的node包所用的node版本不同，导致运行的时候报错

那怎么办呢，换一个版本的包？包的开发者不可能用每一个node版本都开发一次吧。

这时候就要用到「electron-rebuild」了！

该可执行文件将根据您的Electron项目使用的Node.js版本重建原生Node.js模块（native Node.js modules）

只要在npm install之后，运行electron-rebuild就行了，就不会有冲突了。

4、打包应用

electron应用会出现，开发环境能正常运行，打包之后就运行出错。

用electron-forge打包过后运行出错，看起来是依赖的包出错了。

换用electron builder打包，但是electron builder打包较为复杂，能设置的参数很多，网上也没有较为友好的教程。打包的时候由于网络问题也一直失败。

最后看这个解决了网络问题：https://segmentfault.com/a/1190000038506971