关于electron:基于Umi搭建Electron-App

环境筹备

在开发之前须要筹备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。

  1. 抉择ant-design-pro版本:

这里回车抉择V4版本。

  1. 抉择语言

尽管TS很火,但我还是喜爱JS(TS还不咋会呢~~~)

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

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

  1. 创立胜利

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

  1. 关上WS,运行npm install、npm run start,界面如下:

  1. 为了直观地区分对 第四步“抉择装置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。

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据