环境筹备

在开发之前须要筹备 Node 环境，能够去 Node 官网下载安装包，装置 Node 环境以及 Npm 工具。
我本地应用 nvm 治理三个版本的 Node，搭建 Umi+Antd+Electron 框架时应用的 Node 版本及 Npm 版本如下图所示。

Tips: 如果感觉 npm 下载依赖包的速度过慢能够思考应用淘宝镜像或者换成 yarn，然而不倡议应用 cnpm，因为 cnpm 下载的依赖包都是扁平化的，会导致打包的过程十分慢且 Node 内存溢出的问题。

应用 Umi 创立 React 我的项目

因为想要应用 Ant Design 作为 UI 库，所以能够参考 Ant Design Pro 的搭建步骤。（如果参考 UmiJS 的搭建步骤，还须要本人再去集成 Ant Design，所以还不如间接参考 Ant Design Pro 的搭建步骤）
如果你的电脑和我的一样是 Windows 零碎，那么依照 Ant Design Pro 提供的步骤搭建框架会呈现下图的问题：

依据上图中的提醒，找到 D:\front_end_environment\node\node_global\bin\create-umi 这个文件关上看一下：

在 Windows 零碎下，盘符前不须要‘%~dp0’符号。将上图红框圈出的局部删掉后保留该文件并执行 create-umi 命令（注：不要再执行 yarn create umi 命令，否则这会重新安装 create-umi，这样会把之前改过的文件笼罩掉。）
如果执行 create-umi 命令报错“不是外部或外部命令”，那么须要将“D:\front_end_environment\node\node_global\bin”门路增加至零碎变量 path 中。

create-umi 配置步骤

执行 create-umi 命令之后须要依据提醒抉择配置：

1. 抉择模板类型：

这里回车抉择第一个 ant-design-pro。

2. 抉择 ant-design-pro 版本：

这里回车抉择 V4 版本。

3. 抉择语言

尽管 TS 很火，但我还是喜爱 JS（TS 还不咋会呢~~~）

4. 抉择装置 Ant Design Pro 的所有模块还是安装简单的脚手架

对 Ant Design 比拟相熟的话，抉择 complete。

5. 创立胜利

最终胜利搭建好的 React 我的项目目录构造如下：

6. 关上 WS，运行 npm install、npm run start，界面如下：

7. 为了直观地区分对 第四步“抉择装置 Ant Design 的所有模块还是安装简单的脚手架”进行不同抉择的区别，我也进行了简略脚手架的装置，界面如下：

比照两种抉择的后果，显然装置 Ant Design Pro 的所有模块会看到 Ant Design 官网提供的丰盛的页面样例，外面涵盖了大部分的 Ant Design 组件。而简略的脚手架中就只有简略的两个页面，然而两个工程除了 pages 文件夹下的内容不一样之外，其余内容简直没有什么不同。
所以理论利用中依据理论需要做出适合的抉择即可。

Web 利用——>Electron 利用

引入 Electron 依赖

参考 Electron 官网文档，执行 npm install electron --save-dev 命令装置 Electron 作为开发依赖。

编写 Electron 主过程文件

参考 Electron 官网文档，编写 Electron 主过程文件 main.js。临时先将 main.js 放在工程根目录。
main.js 文件内容如下：

注：图片中所示代码的 17 行，mainWindow.loadURL(url); 这里的参数 url 应该与 webpck 的 devServer 配置项的 host 和 port 统一。应用 Umi 创立的我的项目内置了 webpack devServer 配置，默认配置见 devServer 或间接看下图：

如果你本地的 8000 端口被占用了，能够在 package.json 中指定 PORT，就像这样：

或者，你也能够在工程根目录下新建.env 文件，在.env 文件中配置 PORT，就像这样：

Umi 中内置的环境变量配置项还有很多，详见：env-variables。

运行 Electron App

main.js 配置好之后，开始尝试把 Electron App run 起来~~~
在 package.json 中配置程序主入口 main.js，并且增加运行 Electron 的脚本命令，如下图：

而后。。。看到 electron 脚本命令后面的绿色小三角了吗？点它点它！或者间接在 Terminal 输出 npm run electron，就能把 electorn 利用 run 起来了，如下图：

当初看到的 Electron App 的界面是一片空白，是因为主过程脚本第 17 行代码：mainWindow.loadURL('http://localhost:8000/');须要加载的 ’http://localhost:8000/’ 资源找 …
在这个基于 Umi 创立的 Electron App 中，渲染过程这一角色由 React 来充当。所以须要先执行 Umi 的启动脚本：

而后再从新运行 Electron 的启动脚本，此时能够看到 Elctron App 中呈现平时在 Web 端看到的界面咯~~：

启动 Electorn App 须要先后执行两个脚本命令，这样会比拟麻烦，主过程和渲染过程如果能够应用一个脚本命令就能够全副启动的话，会节俭一部分开发调试工夫。
应用 concurrently 库同步运行多命令，同时运行 electron 和 react。应用 wait-on 库期待 8000 端口启动实现之后运行 electron。具体的脚本命令如下图：

看一下执行过程：

Electron App 打包

装置 electron-builder

Electron App 的打包形式有三种，具体可参考 Electron 利用打包、公布、更新这篇文章。
我抉择的打包形式是 electron-builder。
参考 electron-builder 官网，执行 yarn add electron-builder --dev 命令装置 electron-builder 作为开发依赖。

配置 electron-builder

我的电脑是 Windows 零碎（如果操作系统不一样，请自行查问 electron-builder 官网文档配置），具体配置如下图：

我只简略的配置了 appId（理论生产的时候须要申请，这里先轻易写一个），productName（为最终生成的可执行文件指定名字，理论生产的时候依据理论状况批改），打包文件输入目录 output，打包时应用的文件 files。其余配置项请参考 electron-builder 官网配置文档。

webpack 打包配置

如果 Electron App 没有集成 React 作为渲染过程，那么只须要配置 electron-builder 即可，然而这个工程是基于 Umi 创立的，所以相当于渲染过程和主过程是离开打包的：

1. 对渲染过程（React）应用 webpack 打包；
2. 主过程（Electron）应用 electron-builder 打包，把渲染过程打出的包再打进 Electron 包里（看上图中第 126 行的 files 配置）。
   Umi 中内置了 webpack，所以一些配置曾经写好了，然而须要联合 Electron 打包的须要批改一下默认配置：

history

默认路由模式是“browser”，打包后会呈现首页或其余页面找不到继而加载不进去的状况，所以须要改成 hash 模式。

publicPath

默认值是 ’/’，须要改成 ”./”
摘录自 Umi publicPath

配置 webpack 的 publicPath。当打包的时候，webpack 会在动态文件门路后面增加 publicPath 的值，当你须要批改动态文件地址时，比方应用 CDN 部署，把 publicPath 的值设为 CDN 的值就能够。如果应用一些非凡的文件系统，比方混合开发或者 cordova 等技术，能够尝试将 publicPath 设置成 ./ 相对路径。

outputPath

默认值是 ’dist’，然而因为 Electron 的打包输入目录是 dist，所以 webpack 打包输入目录改成 ’build’。
具体配置如下图：

Electron 主过程文件批改

内容批改

在开始打包之前，须要对主过程 main.js 文件做一些批改，如下图：

图中减少的几行代码大多是无关环境变量的，在生产环境下是无奈通过 loadURL 这种形式加载渲染过程的，生产环境下只能通过加载某个文件来加载渲染过程，也就是上图中的 loadFile 的形式。
在生产环境和开发环境下加载渲染过程的形式不同，所以须要判断以后的环境而后进行别离解决。
环境变量的配置能够看一下 cross-env 这个库，在应用 Umi 创立工程时，cross-env 是默认装置的。

地位变动

之前在编写 Electron 主过程文件的时候，临时将 main.js 放在了工程根目录。但这样搁置的话，因为 main.js 与其余模块之间没有任何援用关系，所以 webpcak 打包时无奈把 main.js 打进去。那么生产环境下 main.js 中加载 index.html 就找不到这个文件，执行打包后生成的 electron.exe 文件时会呈现白屏的状况。
鉴于这种状况，有以下的解决办法：

1. 把 main.js 放到 public 文件夹下，因为 webpack 打包时 public 文件夹下的文件都会一成不变地复制到 build 文件夹中。
2. 将 package.json 中配置项 ”main” 的值由 ”main.js” 改为 ”build/main.js”。

脚本命令配置

生产环境和开发环境下 electron 启动命令

通过在 package.json 中配置脚本命令的形式来设置以后的环境，如下图：

图中第 36 行是生产环境下 electron 启动命令，通过 cross-env NODE_ENV=production 来设置环境变量为“production”表明是生产环境，生产环境下 electron 主过程是间接执行的打包生成的 build 文件夹下的 main.js 文件。
图中第 37 行是开发环境下 electron 启动命令，设置环境变量的形式与生产环境相似，然而开发环境下 electron 主过程是执行的 public 文件下的 main.js。

针对不同平台的 electron 打包命令

在 package.json 里我只配置了 windows 和 mac 两种平台的打包命令（它们的共同点是都要先执行 yarn build 对 react 进行打包），因为我的电脑是 windows，所以只尝试了 windows 下的打包，打包出的文件如下图：

打包体积

Electron App 打出的包体积有些大，如果网络不好的话，下载安装包会有些慢。总的来说，打包体积有待优化。

basic-electron-umi-app

这是我搭建的基于 Umi 的 electron app 框架，放到 gitee 上了：basic-electron-umi-app。
​