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

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

---

1、概述

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

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

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

2、技术路线

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

Technical	用途	文档官网
Electron	包装 HTML 页面，为网页提供一个本地运行环境	http://electron.atom.io/docs/
React	用 React 组件来写页面	https://facebook.github.io/react/
Node.js	为 Electron 提供运行环境	https://nodejs.org/en/docs/
ES6	用 Javascript 最新的 ES6 标准来完成代码	http://es6-features.org/#Constants

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

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

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

3、环境配置

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

Library & Technical	用途
electron-prebuilt	Electron 基础库
electron-reload	自动检测本地文件修改，并重新加载页面
electron-packager	将最终的代码打包，提供给用户
react	React 基础库
react-dom	将 React 组件渲染到 HTML 页面中(ReactDOM.render)
react-tap-event-plugin	使 material-ui 库支持按钮点击事件（http://www.material-ui.com/#/get-started/installation）
babel + babelify	将 ES6 代码转换成低版本的 Javascript 代码
babel-preset-es2015	转换 ES6 代码
babel-preset-react	转换 React JSX 语法的代码
babel-plugin-transform-es2015-spread	babel 插件，转换 ES6 中的 spread 语法
babel-plugin-transform-object-rest-spread	babel 插件，转换 ES6 中的 Object spread 语法
browserify + watchify	自动检测本地文件修改，结合 babel 重新转换 ES6 代码
Material-UI	Google Material-Design 风格的 React UI 组件

4、各个库交互流程

        

5、开始开发

5.1、新建项目

        首先我们要安装 Node.js。然后通过下面的命令新建一个项目：

npm init

        

5.2、添加依赖

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

npm install –save-dev module_name

npm install –save module_name

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

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

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

npm install –save-dev electron-prebuilt electron-reload electron-packager

npm install –save-dev babel babelify babel-preset-es2015 babel-preset-react babel-plugin-transform-es2015-spread

npm install –save-dev browserify watchify

npm install –save react react-dom react-tap-event-plugin

npm install –save material-ui

5.3、babel 配置