Electron + React + Node.js + ES6 开发桌面软件

1、概述

        近来工作上需要做一款 PC 上的软件，这款软件大体来讲是类似 PPT 的一款课件制作软件。由于我最近几年专注于移动 App 的开发，对 PC 端开发的了解有些滞后。所以我首先需要看看，在 PC 上采用什么框架能够顺利完成我的工作。

        我的目标是，在完成这款软件的同时能够顺便学习一下比较流行的技术。在经过前期技术调研后，我明确了实现这款软件所需要的技术条件：

• 不采用 C++ 方面的类库，比如 MFC、Qt、DuiLib 等等；
• 本来想试试 C# 来开发，但 C# 对我来说，需要从头学习，如果学 C# 只为了开发这一款软件，后续再无用武之地，那么对我来说，学习的驱动力不大；
• 之前学习了移动端的开发库 ，所以对 组件化的开发方式颇有好感，所以想尝试用 React 来开发。

2、技术路线

        基于以上几点考虑，我通过搜索了解了 这个框架，果断采用了下面的技术路线：

         是基于 Node.js 的上层框架，为 HTML 页面提供一个 Native 的壳，并提供本地化的功能——如创建 Native 的 Window、文件选择对话框、MessageBox、Window 菜单、Context 菜单、系统剪切板的访问等等。，所以我们只需要写一份 Javascript 代码和 HTML 页面，就可以打包到不同的系统上面运行。

         主要用来以组件化的方式写页面，另外 React 已经有非常非常多的开源组件可以用了，我们只需要通过 引入进来即可使用。

        因为 Electron 运行在 环境里，所以我们的 App 已经可以访问所有的 Node.js 的模块了——比如文件系统、文件访问等等，可以很方便的实现 Javascript 操作本地文件。另外安装其他 npm 包也不费吹灰之力。

3、环境配置

        将上述技术结合起来，需要的环境配置如下：

4、各个库交互流程

5.2、添加依赖

        这样，就在我们的项目目录下新建了一个 文件，然后我们安装其他 npm 依赖。用下面的命令：

npm install –save-dev module_name

npm install –save module_name

         和 参数的区别是： 参数会把添加的 npm 包添加到 下， 依赖只在开发环境下使用，而 会添加到 依赖下面。

        这样，我们就知道了，将 、 等等生成代码的依赖库，需要安装在 依赖下面，而像 等等，需要安装在 下面，以供打包发布后还能使用。

        我们依次将前面第 3 小节所述的依赖全部通过 npm 安装进来，其中 相关组件安装起来非常慢，有很大几率失败——如果安装失败了，多试几次或者翻墙安装。

npm install –save-dev

npm install –save-dev

npm install –save-dev

npm install –save

npm install –save

5.3、 配置

        安装好 后，还需要进行配置。我们通过 babel 官 了解到，需要在项目目录下放置一个 文件，让 知道转换哪些代码。我们的 文件内容如下：

        通过 和 两个子项，我们告知 babel 转换 ES
6 和 React JSX 风格的代码，另外还需转换 ES6 中的 语法。

5.4、 & & 配置

        另外，我们需要在 文件中配置 ，让其可以自动检测本地代码变化，并且自动转换代码。 如下：

        通过 文件，我们在 下面配置了三个命令：、、，分别用于启动 App、检测并转换代码、打包 App。

electron .
watchify app/appEntry.js -t babelify -o public/js/bundle.js –debug –verbose
electron-packager ./ DemoApps –overwrite –app-version=1.0.0 –platform=win32 –arch=all –out=../DemoApps –version=1.2.1 –icon=./public/img/app-icon.icns

        然后我们在命令行下通过 ，可以运行上面定义好的命令。我们看到，通过 将代码转换输出到 目录下，所以我们发布时只需要发布这一个转换好的 js 文件即可。

5.5、目录结构一览

        在我们正式开发之前，先来看一下整个项目的目录结构：

        另外我们看到通过引入 模块，让本地文件更新后，自动重新加载页面：

6.3、 开发

        接下来就是 页面的开发了，这里也比较简单：

        看的出来，我们定义了一个 id 为 的 ，这个 div 是我们的容器，React 组件将会渲染到这个 div 上面。然后引入了 这个 Javascript 文件——前面讲过，这个文件是通过 转换生成的。

6.4、 开发

        我们知道， 是通过 生成而来，所以，appEntry.js 文件主要负责 HTML 页面渲染——我们通过 React 来实现它。