关于自己为什么学electron
去年的时候看到公众号推文好多都提到了electron和flutter,那时候懒,一直没能够去主动了解相关的知识。最近部门同事分享了用shell脚本或谷歌插件处理日常的一些重复行为,脑子里想到了之前每次上传指定大小图片的时候都是登录qq或微信,利用截图功能来截取对应大小的图片,每次调整那1px的距离的时候都快抓狂了。electron就是开发桌面应用的,何不用electron来实现这个功能,只有输入宽高,就生成指定尺寸的图片,然后图片的背景色指定自定义,不填就随机给个颜色。奈斯,明确了自己的需求点,可以愉快的学习啦~~~
开始之前提下相关版本情况:
node: 12.13.0
electron: 8.2.5
一、安装
安装过程中发现一直卡在install那一步,当前已经是淘宝源了,发现还需要加一下配置:
npm config list查看userconfig位置
找到.npmrc文件的地址之后,在该文件中添加一句
electron_mirror="https://npm.taobao.org/mirrors/electron/"
好了,现在就可以执行 npm install -g electron
electron提供了示例仓库,可快速启动
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install && npm start
二、编写
自己日常的开发习惯是react+ts+antd,如果是这种环境到时开发功能也比较顺手
1、创建react+ts项目
create-react-app my-tools --template typescript
cd my-tools
npm start
此时看到的是经典的react启动页
2、引入antd和babel-plugin-import
npm install antd --save
npm install babel-plugin-import --save-dev
3、安装 react-app-rewired 、 cross-env 和 customize-cra
npm i -D react-app-rewired cross-env customize-cra
react-app-rewired2.x以后需要安装customize-cra来实现修改webpack配置
安装之后需要修改下package.json中scripts的一些配置,主要是将 start、build、test
命令的react-scripts改成react-app-rewired,最终如下:
/* package.json */
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
}
4、创建 react-app-rewired 配置文件 config-overrides.js 用于扩展 webpack 配置
antd需要按需加载
/* config-overrides.js */
const { override, fixBabelImports, } = require("customize-cra");
module.exports = override(
fixBabelImports("import", {
libraryName: "antd", libraryDirectory: "es", style: 'css',
}),
);
5、编写页面代码
修改了APP.tsx文件的代码,然后在react-app-env.d.ts
中加了些style的定义,并且把tsconfig.json
中的strict改成了false,启动项目之后页面如下:
6、安装 electron 环境并配置入口文件
npm i -D electron
/* main.js */
const { app, BrowserWindow } = require('electron');
const path = require('path');
let mainWindow = null;
const createWindow = () => {
let mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
}
});
/**
* loadURL 分为两种情况
* 1.开发环境,指向 react 的开发环境地址
* 2.生产环境,指向 react build 后的 index.html
*/
const startUrl =
process.env.NODE_ENV === 'development'
? 'http://localhost:3000'
: path.join(__dirname, "/build/index.html");
mainWindow.loadURL(startUrl);
mainWindow.on('closed', function () {
mainWindow = null;
});
};
app.on('ready', createWindow);
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit();
});
app.on('activate', function () {
if (mainWindow === null) createWindow();
});
7、添加相关脚本
/* package.json */
"main": "main.js",
"author": "xuanye",
"description": "个人工具集",
"scripts": {
"start": "cross-env BROWSER=none react-app-rewired start",
"start-electron": "cross-env NODE_ENV=development electron .",
"start-electron-prod": "electron ."
},
8、测试页面效果
一个命令行窗口跑 react 项目
npm run start
另一个命令行窗口跑 electron 项目
npm run start-electron
启动之后会出现如下窗口内容
关于为什么要起两个命令行窗口,其实我们在 main.js
文件中已经写明了开发环境下我们加载的是3000端口的内容,如果你不启动react项目,那么跑electron命令的时候创建的就是个空的桌面应用。
三、打包
1、添加 electron-builder 工具
npm i -D electron-builder
2、添加脚本以及打包相关配置
图标名称必须含有256
nsis配置项的内容根据需要自行配置
/* package.json */
"homepage": ".", // 避免css等资源找不到的情况
"scripts": {
"build-electron": "electron-builder"
},
"build": {
// 软件包名
"appId": "com.xxx.xxx",
// 项目名,也是生成的安装文件名
"productName": "工具集",
// 版权信息
"copyright": "Copyright © 2020",
// 不配置extends为null打包的时候会报错:Application entry file "build/electron.js" does not exist
"extends": null,
"directories": {
// 输出文件路径
"output": "build-electron"
},
"files": [
"./build/**/*",
"./main.js",
"./package.json"
],
"win": { // win相关配置
"icon": "./favicon_256.ico",
/* 打包生成的启动文件的命名方式 */
"artifactName": "${productName}.${ext}"
},
"nsis": {
// 是否一键安装,不可更改目录等选项,默认为true
"oneClick": false,
// 是否允许权限提升。如果为false,则用户必须使用提升的权限重新启动安装程序。
"allowElevation": true,
// 是否允许更改安装路径
"allowToChangeInstallationDirectory": true,
// 是否创建桌面图标
"createDesktopShortcut": true,
// 创建开始菜单图标
"createStartMenuShortcut": true,
// 安装完成请求运行
"runAfterFinish": true,
// 安装包图标
"installerIcon": "./favicon_256.ico",
//卸载程序图标
"uninstallerIcon": "./favicon_256.ico",
// 安装时头部图标
"installerHeaderIcon": "./build/icons/aaa.ico",
// 桌面图标名称
"shortcutName": "工具集"
}
},
3、开始打包
打包react项目npm run build
(根目录下会生成build文件夹,存放打包之后的内容)
运行 npm run start-electron-prod
查看生产环境功能是否正常运行
功能验证没问题之后就可以项目打包成安装包 npm run build-electron
,安装包所在路径为 package.json
中指定的 build-electron 目录
打包慢问题,需要下载去官网下载对应版本的包,解压到本地
下图的报错是需要把图片的文件名包含256
之后打包发现一直卡在下载winCodeSign-2.6.0,去https://github.com/electron-userland/electron-builder-binaries/releases/tag/winCodeSign-2.6.0下载对应版本的winCodeSign(记得切换成你需要的版本),然后下载source code(zip)文件,
然后发现变成卡在nsis,去https://github.com/electron-userland/electron-builder-binaries/releases/tag/nsis-3.0.4.1下载对应版本的nsis(记得切换成你需要的版本),然后下载source code(zip)文件,
然后发现变成卡在nsis-resource,将上一步文件中的nsis-resource文件夹拷过来,
展示下想要文件命名
打包成功之后就能在根目录下看到build-electron文件夹,里面有可执行的exe文件,点击即可安装
后话
author和description必填
图片必须是256 * 256
如果不配置nsis那么应用程序就会自动的安装在C盘
查看asar文件
npm install -g asar
在asar文件所在的根目录执行asar extract app.asar ./
指令,asar extrct
指令有两个参数,第一个是需要解压缩的asar文件,第二个参数是解压缩之后文件存放的路径,“./”是指放在根目录。