react+ electron 项目搭建和初步探索

项目缘由

之前就使用过electron 构建桌面 应用程序，不过那是基于Vue的脚手架做的，electron-vue已经很长时间没有更新了，但是使用vue add electron-builder 构建还是很简单的，开始使用vue3 构建过程中 ，发现最新版本的electron-builder 需要node14及以上版本的环境，在安装node14的过程中又发现，他只支持Windows8 系统，对于Windows7系统的电脑，不能为了使用，把系统重新安装，再加上后来也发现，我选择的一些UI库对于react 能更好的支持，同时我的项目一直也是使用react 开发的，于是果断选择了react + electron ，后面的坑也不少，于是做一个初步的记录。

---

---

前言

开始整

一、项目搭建

1. 创建react项目

create-react-app脚手架来创建一个react项目

npx create-react-app my-app 
cd my-app 
npm start

打开浏览在http://localhost:3000/ 检测项目是否创建成功

2. 创建electron

全程我都是使用yarn 进行安装

yarn add electron

3. 配置package.json

 "private": true,
  "main": "main.js", //添加
  "homepage": ".",
  "dependencies": {
    "axios": "^0.21.1",
    "babel-jest": "26.6.0",
    "cross-env": "^7.0.3",
    "electron-is-dev": "^2.0.0",
    "electron-packager": "^15.2.0",
    "qs": "^6.10.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
  },

4. 配置main.js

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron');
const path = require('path');
const isDev = require('electron-is-dev');

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;

function createWindow() {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    center:true,
    fullscreen:true,
    autoHideMenuBar:true,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      preload: path.join(__dirname, 'preload.js'),
      webSecurity:false,
      enableRemoteModule: true
    },
    icon: path.join(__dirname, `${__dirname}/src/assets/images/favicon.ico`)
  });

  mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${__dirname}/public/index.html`);

  // Open the DevTools
  isDev && mainWindow.webContents.openDevTools();

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    mainWindow = null;
  })

  mainWindow.on('resized', function () {
    console.log('这是窗口大小变化1');
    mainWindow.webContents.send('windowReSize','这是窗口大小变化');

    // mainWindow.webContents.reload();
  })
}
app.on('ready', () => {
  createWindow();
})

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit();
})

app.on('activate', function () {
  if (mainWindow === null) createWindow();
})

5. 还需要preload.js

window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector);
      if (element) element.innerText = text;
    } 
    
    for (const type of ['chrome', 'node', 'electron']) {
      replaceText(`${type}-version`, process.versions[type]);
    }
  });

6. 启动electron

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron-dev": "electron .",
  },

如果我们此时启动electron-dev 会启动electron ，但是桌面会是空白，所有我们先启动

npm run dev

在启动

npm run electron-dev

但是这样太麻烦了，所有还是得配置

二、优化启动

1.引入库

1.安装electron-is-dev库，判断是否是开发环境

这个在main.js中有使用

注意：isDev判断是否为开发环境；
开发环境就loadURL为localhost:3000
非开发环境：加载打包之后的静态文件，这里先留存之后再修改

//安装
yarn add  electron-is-dev --save-dev

//使用
const isDev = require('electron-is-dev')

 mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${__dirname}/public/index.html`);

  // Open the DevTools
  isDev && mainWindow.webContents.openDevTools();

2. 安装concurrently同步

npm start和electron .同时进行 保证两个服务能同时进行

//安装
yarn add concurrently --save-dev

3.安装wait-on

等待react的localhost:3000运行起来之后才去开始electron .

//安装
yarn add  wait-on --save-dev

//package.json中将script的dev改成
   "dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"npm start\""

4. 安装cross-env

cross-env控制系统不开启浏览器中的localhost:3000,之后只开启electron程序，并不会开启localhost:3000

//安装
yarn add  cross-dev

//修改package.json
    "dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none npm start\""

5. 重新启动

此时我们运行项目就是我们要的结果了

npm run dev

三、配置打包

1. 安装库

这里的打包方式最好的有两个
electron-builder
electron-packager
但是我通过对比还是选择了前者

使用electron-builder 打包项目，前面也说过，window7 没有办法使用最新的版本，于是我选择了
[email protected]版本

yarn add electron-builder@22.0.0

2. 配置打包环境

1.首先在package.json 中加入启动 dist

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron-dev": "electron .",
    "dist": "electron-builder --win --x64",
    "dev": "concurrently \" wait-on http://localhost:3000 && electron . \" \" cross-env BROWSER=none npm start \" "
  },

2.然后配置build 打包结果

"build": {
    "productName": "",
    "appId": "c"
    "copyright": "xunwei",
    "directories": {
      "output": "electron"
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./build/icons/favicon.ico",
      "uninstallerIcon": "./build/icons/favicon.ico",
      "installerHeaderIcon": "./build/icons/favicon.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "WPDS"
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://xxxxx/"
      }
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "build/icons/icon.icns"
    },
    "win": {
      "icon": "build/icons/favicon.ico",
      "target": [
        {
          "target": "nsis"
        }
      ]
    },
    "linux": {
      "icon": "build/icons"
    }
  },

参数就不做说明了唯一要注意的是打包图标路径，这里只做window处理

3 .然后配置打包文件

通过上面的步骤打包会出现一个错误，不列举了，意思是需要在build 目录中加入main.js 和 preload.js

4 .最后打包

不要以为是最后一步就能成功了，结果不如我所意，还是出错了，打包过程中下载太慢，

我们需要把下面两个文件下载下来，将这两个解压放到，目录C:\Users\自己的用户名\AppData\Local\electron-builder\Cache下有两个文件夹：
nsis-resources-3.4.1.7z
winCodeSign-2.5.0.7z

最后运行

npm run build
npm run dist