electron 打包 react 项目详解

介绍了 react 项目如何引入 electron 打包配置，以及如何运行调试 electron，还详细介绍了使用 electron-forge 和 electron-packager 打包的流程，当然，最重要的是项目开发运行中碰到的问题及解决方案，如本地运行时白屏、node-sass 版本不对、绿色安装过渡动画、菜单配置等等

1. 新建 react 项目

使用create-next-app命令，新建一个 react 项目，完成项目的开发

js 复制代码

npx create-react-app demo --template typescript

2. 引入 electron 快速入门 demo

安装 electron

bash 复制代码

yarn add --dev electron

按照"快速入门"实例，在根目录下，生成 preload.js, main.js, index.html 文件，然后在 package.json 中增加如下启动命令

js 复制代码

{
  "main": "main.js", // 入口文件
  "scripts": {
    "electron-start": "electron .", // 启动命令
  }
}

启动服务，效果如下所示：

bash 复制代码

yarn electron-start

3. react 项目开发调试

上面的步骤中，入口文件是写死的index.html文件，实际项目中，肯定不能这样，需要启动项目文件

启动 react 项目，一般启动地址为http://localhost:3000/

bash 复制代码

yarn start

更改 main.js 中的应用加载地址，改成启动地址

js 复制代码

const createWindow = () => {
  // 创建浏览窗口
  const win = new BrowserWindow({
    width: 1296,
    height: 729,
    webPreferences: {
      // 预加载
      // preload: path.join(__dirname, "preload.js"),
      // 需要在渲染进程中使用node
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  // 加载 index.html
  // win.loadFile("index.html");

  // react项目加载应用（开发环境）
  win.loadURL("http://localhost:3000/");

  // 打开开发工具
  win.webContents.openDevTools();
};

另外打开一个控制台，运行 electron 启动命令，就会打开一个桌面端窗口了，里面是启动的项目页

bash 复制代码

yarn electron-start

4. react 项目打包调试

将 react 项目打包，默认打包文件目录为 build

bash 复制代码

yarn build

更改 main.js 中的应用加载地址，改成打包文件path.join(__dirname, "./build/index.html")

注意：修改配置文件后，需要重新运行打包命令

js 复制代码

const path = require("path");
const createWindow = () => {
  // react项目加载应用（开发环境）
  // win.loadURL("http://localhost:3000/");

  // react项目加载应用（生产环境）
  win.loadURL(
    url.format({
      pathname: path.join(__dirname, "./build/index.html"),
      protocol: "file:",
      slashes: true,
    })
  );
};

运行 electron 启动命令，就会打开一个桌面端窗口了，启动打包文件

bash 复制代码

yarn electron-start

当前也可以直接给打包文件启一个服务，electron 启动服务地址

bash 复制代码

# 安装serve
yarn global add serve
# 启动服务
npx serve -s build
# 指定端口号启动服务
npm serve -s build -p 8080

5. 使用 electron-forge 打包

Electron Forge 是一个处理 Electron 应用程序打包与分发的一体化工具。在工具底层，它将许多现有的 Electron 工具 (例如 electron-packager、 @electron/osx-sign、electron-winstaller 等) 组合到一起，因此不必费心处理不同系统的打包工作。

引入 Forge 到项目，具体可参考官网文档，如下是安装命令：

bash 复制代码

# 安装依赖
yarn add --dev @electron-forge/cli
# 转换脚本
npx electron-forge import

修改 package.json 文件，开发调试使用yarn e-start命令，和yarn electron-start效果一样，就不多介绍了，参考前面的介绍即可

json 复制代码

{
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "electron-start": "electron .",
    "e-start": "electron-forge start",
    "e-package": "electron-forge package",
    "e-make": "electron-forge make",
    "e-publish": "electron-forge publish"
  }
}

将 main.js 和 package.json 复制到 public 文件夹下，更改 main.js 中的应用加载地址，改成打包文件地址path.join(__dirname, "./build/index.html")。然后运行如下命令，就可以完成桌面端应用打包了。

bash 复制代码

# react 项目打包
yarn build

# 桌面端应用打包
yarn e-make

build为react项目打包目录

out为桌面端应用打包目录

6. 使用 electron-packager 打包

electron-forge 就是使用了 electron-packager 和其他工具组合打包的，如果不想安装使用 electron-forge，也可以直接使用 electron-packager 进行打包，但是 windows 上不能打包成 exe 文件，需要综合考虑使用啥打包工具。

注意：最好是在对应平台打包对应的安装包，不同平台有兼容性问题。

我开发是在Mac上进行的，运行打包没问题。但项目在window上运行、打包，仍然会出现各种问题，需要适配处理。

json 复制代码

{
  "scripts": {
    // mac打包命令配置
    "e-build": "electron-packager ./build sanguo --platform=darwin --arch=x64 --out=./out --asar --app-version=1.0.3 --electron-version=26.1.0 --overwrite",
    // window打包命令配置
    "e-build-win": "electron-packager ./build sanguo --platform=win32 --arch=x64 --overwrite --out=./out --asar --app-version=1.0.3 --electron-version=26.1.0"
  }
}

7. 项目问题解决

7.1 本地运行时白屏

打开控制台，可以看到加载路径不对。

解决办法：在 package.json 中配置 homepage。

运行打包命令时，有如下提示：

The project was built assuming it is hosted at ./. You can control this with the homepage field in your package.json

json 复制代码

{
  "homepage": "."
}

7.2 nodejs 版本不对

windows 上 nodejs 版本为 14.x，安装依赖时报错，提示最低要求为 16.x。安装了 v16.20.2 版本

node-sass 版本不对，安装报错

解决一：卸载当前版本，安装指定版本。这是以往比较常用的方式

bash 复制代码

# 卸载
npm uninstall sass-loader node-sass
# 推荐
npm install [email protected] [email protected] --save-dev

解决二：升级到 nodejs16 之后，可以不用安装 node-sass，安装 sass 就行（我才用的是这种方式，node-sass 安装问题太多，太麻烦了，懒得适配）

bash 复制代码

# 卸载
npm uninstall sass-loader node-sass
# 我的使用
npm install sass-loader sass --save-dev

7.3 运行 e-make 打包命令报错

报错信息：

Output: ��ڳ��Դӡ�sanguo.nuspec��ɳ�� Authors is required. Description is required.

解决办法：在 package.json 文件中，配置这两个字段

json 复制代码

{
  "description": "xxx",
  "author": "xxx"
}

7.4 隐藏顶部菜单栏

修改main.js文件，设置setMenu为空

js 复制代码

const createWindow = () => {
  ...
  win.setMenu(null); // 隐藏菜单栏
};

7.5 绿色安装过渡动画

打包后，运行 exe 文件，会出现一个绿框动画（安装的过渡动画），客户觉得体验效果不好，需要取消。

解决办法：在forge.config.js中配置，用一个空白的 gif 代替

如何生成空白 gif，可详见动画

js 复制代码

const path = require("path");
module.exports = {
  makers: [
    {
      name: "@electron-forge/maker-squirrel",
      config: {
        loadingGif: path.join(__dirname, "src", "assets", "img", "blank.gif"),
        noMsi: true,
        remoteReleases: false,
        createDesktopShortcut: true,
      },
    },
  ],
};

7.6 electron 程序异常处理

在 main.js 中增加如下配置，直接重启应用：

js 复制代码

app.on("render-process-gone", function (event, webContents, details) {
  // 输出一下错误，进行具体处理
  console.error("render-process-gone", details);
  // 重启应用
  app.relaunch({ args: process.argv.slice(1).concat(["--relaunch"]) });
  // 关闭所有窗口
  app.quit();
});

7.7 隐藏导航栏

修改main.js文件，详见官方文档创建无边框窗口

js 复制代码

const createWindow = () => {
  // ...
  titleBarStyle: "hidden", // mac隐藏导航栏
  frame: false, // window隐藏导航栏
  autoHideMenuBar: true, // 自动隐藏菜单栏
};

7.8 全屏展示

js 复制代码

const createWindow = () => {
  // ...
  // width: 1296,
  // height: 729,
  fullscreen: true, // 默认全屏
};

7.9 最大化展示

js 复制代码

win = new BrowserWindow({ show: false });
win.maximize();
win.show();

7.10 打包兼容win7系统

上述打包的exe文件，在win7系统上运行报错：

无法定位程序输入点 DiscardVirtualMemory 与动态链接库 KERNEL32.DLL 上

原因是：由于在 Windows 7 系统上使用了 Windows 8 或更高版本的 API 导致的。

而 Electron 22.0.0 是支持Windows 7/8/8.1的最后一个版本，具体可看官网版本更新Electron 22.0.0。

解决办法：将electron版本降为21.4.4

参考文档：