基于React搭建Electron项目框架

基于React搭建Electron项目框架

最近利用Electron来开发桌面端的项目，将项目搭建过程和遇到的问题做一个记录。

项目基础搭建以及打包配置优化

• 环境加速

cat ~/.zshrc | grep ELECTRON
// 配置
export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"

• Electron本地加载React项目

1、创建React项目

create-react-app demo

2、添加Electron依赖包

npm install electron --save-dev

3、在React项目中创建main.js编写Electron代码

const {app, BrowserWindow, ipcMain} = require('electron')
const path = require('path')
const isDev = require('electron-is-dev');

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
  })
   const releasePath = isDev? "http://localhost:3000/" : `file://${path.resolve(__dirname, '../build/index.html')}`;
    mainWindow.loadURL(releasePath);
//   mainWindow.webContents.openDevTools()
}
app.whenReady().then(() => {
    createWindow()
    app.on('activate', function () {
      if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
})

4、修改package.json配置

"main": "main.js",
// 添加
"scripts": {
    "dev": "electron ."
},

5、然后在命令行先后运行reac项目和electron

yarn start
yarn dev

6、添加相关插件优化操作代码

// 判断是否是electron的开发环境
npm install electron-is-dev --save-dev

// 命令行执行多个命令,
npm install concurrently --save-dev

// 等待某个命令执行完之后再执行后面的命令
npm install wait-on --save-dev

// 修改scripts
"scripts": {
    "dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"yarn start\" "
  }

// 环境变量
npm install cross-env --save-dev
// 解决启动react项目的时候不打开浏览器窗口
"dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none yarn start\" "

• electron-builder构建打包配置

修改package.json配置

{
  "name": "ele_react_demo",
  "version": "0.1.0",
  "private": true,
  "main": "./main/main.js",
  "description": "The application description",
  "author": {
    "name": "westone",
    "email": "835532412@qq.com"
  },
  "scripts": {
    "dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none yarn start\" ",
    // 添加打包命令和打包之前打包react项目
    "pack": "electron-builder --dir",
    "dist": "electron-builder",
    "prepack": "yarn run build",
    "predist": "yarn run build"
  },
  "build": {
    "appId": "com.westone.eledemo",
    "productName": "electron demo",
    "mac": {
      "category": "public.app-category.productivity"
    },
    "copyright": "Copyright © 2021 ${author}",
    "extends": null,
    // 添加需要编译的文件
    "files": [
      "build/**/*",
      "node_modules/**/*",
      "main/*",
      "./src/config/*/*",
      "./src/winpage/*"
    ],
  },
  // react使用相对路径
  "homepage": "./"
}

构建安装包的配置

在build节点下面添加

"directories": {
// 制作安装包需要的图片路径
  "buildResources": "assets"
},
"dmg": {
  "background": "assets/appdmg.png",
  "icon": "assets/icon.icns",
  "iconSize": 100,
  "contents": [
    {
      "x": 380,
      "y": 280,
      "type": "link",
      "path": "/Applications"
    },
    {
      "x": 110,
      "y": 280,
      "type": "file"
    }
  ],
  "window": {
    "width": 500,
    "height": 500
  }
},
"win": {
  "target": [
    "msi", "nsis"
  ],
  "icon": "assets/icon.ico",
  "artifactName": "${productName}-Web-Setup-${version}.${ext}",
  "publisherName": "Viking Zhang"
},
"nsis": {
  "allowToChangeInstallationDirectory": true,
  "oneClick": false,
  "perMachine": false
}

• 打包优化

Electron项目包大主要是因为asar中包含了自己编写的React代码、node_modules、Electron主进程代码，所以可以从这三个方面进型优化。

1、React项目的优化

React项目中最后都是使用yarn build把所有的代码都压缩到build下面去了，所以可以将并没有必要的dependencies中的依赖移动到devDependencies中去，减少node_modules的大小。

2、Electron主进程的优化

利用webpack来打包主进程代码

1、在根目录下面创建
webpack.config.js

const path = require('path')

module.exports = {
  target: 'electron-main',
  entry: './main/main.js',
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'main.js'
  },
  node: {
    __dirname: false
  }
}

2、在package.json中修改配置

// 新增
"scripts": {
    "buildMain": "webpack"
},

// 修改
"files": [
  "build/**/*",
  "node_modules/**/*",
  "main/*",
  "./src/config/*/*",
  "./src/winpage/*"
],

修改之后的配置(主进程的代码利用webpack打包到buidl目录下面了)
"files": [
  "build/**/*",
  "node_modules/**/*",
  "./src/winpage/*"
],

// 在build节点下新增
// 修改入口
"extraMetadata": {
  "main": "./build/main.js"
},

// 修改
"scripts": {
    "prepack": "yarn run build && npm run buildMain",
    "predist": "yarn run build && npm run buildMain",
    "buildMain": "webpack"
  },
  
// 代码修改
// 因为修改配置之后main.js在当前build目录
const releasePath = isDev? "http://localhost:3000/" : `file://${path.resolve(__dirname, '../build/index.html')}`;

改为：

const releasePath = isDev? "http://localhost:3000/" : `file://${path.resolve(__dirname, './index.html')}`;

• asar分析

Electron在打包完成之后，在安装包下面会生成app.asar文件，里面一般包含了项目压缩打包之后的代码和资源文件。

利用asar工具可以查看自己或者竞品项目

npm install asar -g
解压asar文件
asar e ./app.asar ./res
然后就可以在res目录下面查看对应的文件了

基础项目基础骨架

项目地址