基于react+ts+antd开发一个简单的electron应用

5,218 阅读5分钟

关于自己为什么学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、添加脚本以及打包相关配置

制作icon图标

图标名称必须含有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文件,第二个参数是解压缩之后文件存放的路径,“./”是指放在根目录。