electron 打包 react 项目详解

时光足迹
1,064 阅读7分钟

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

1. 新建 react 项目

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

npx create-react-app demo --template typescript

2. 引入 electron 快速入门 demo

  1. 安装 electron
yarn add --dev electron
  1. 按照“快速入门”实例，在根目录下，生成 preload.js, main.js, index.html 文件，然后在 package.json 中增加如下启动命令
{
  "main": "main.js", // 入口文件
  "scripts": {
    "electron-start": "electron .", // 启动命令
  }
}
  1. 启动服务，效果如下所示：
yarn electron-start

e-start.png

3. react 项目开发调试

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

  1. 启动 react 项目，一般启动地址为http://localhost:3000/
yarn start
  1. 更改 main.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();
};
  1. 另外打开一个控制台，运行 electron 启动命令，就会打开一个桌面端窗口了，里面是启动的项目页
yarn electron-start

4. react 项目打包调试

  1. 将 react 项目打包，默认打包文件目录为 build
yarn build
  1. 更改 main.js 中的应用加载地址，改成打包文件path.join(__dirname, "./build/index.html")

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

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,
    })
  );
};
  1. 运行 electron 启动命令，就会打开一个桌面端窗口了，启动打包文件
yarn electron-start
  1. 当前也可以直接给打包文件启一个服务，electron 启动服务地址
# 安装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 等) 组合到一起，因此不必费心处理不同系统的打包工作。

  1. 引入 Forge 到项目，具体可参考官网文档，如下是安装命令：
# 安装依赖
yarn add --dev @electron-forge/cli
# 转换脚本
npx electron-forge import
  1. 修改 package.json 文件，开发调试使用yarn e-start命令，和yarn electron-start效果一样，就不多介绍了，参考前面的介绍即可
{
  "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"
  }
}
  1. 将 main.js 和 package.json 复制到 public 文件夹下，更改 main.js 中的应用加载地址，改成打包文件地址path.join(__dirname, "./build/index.html")。然后运行如下命令，就可以完成桌面端应用打包了。
# react 项目打包
yarn build

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

项目目录结构及打包目录如下：

build为react项目打包目录

out为桌面端应用打包目录

e-build.png

6. 使用 electron-packager 打包

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

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

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

{
  "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

{
  "homepage": "."
}

7.2 nodejs 版本不对

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

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

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

# 卸载
npm uninstall sass-loader node-sass
# 推荐
npm install node-sass@6.0.1 sass-loader@10.2.0 --save-dev

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

# 卸载
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 文件中，配置这两个字段

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

7.4 隐藏顶部菜单栏

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

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

7.5 绿色安装过渡动画

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

e-loading.png

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

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

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 中增加如下配置，直接重启应用：

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文件，详见官方文档创建无边框窗口

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

7.8 全屏展示

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

7.9 最大化展示

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

8. 热更新配置

每次改动，都要重新启动服务，就很麻烦了，因此加上热更新配置就很有必要了。

主要使用的就是nodemon，如下使用 npm 全局安装，已经安装过的，就不用重复安装了

npm install -g nodemon

修改启动命令如下：可以监听

"scripts": {
    "electron-start": "nodemon --exec electron .",
},

根目录下新建一个nodemon.json文件，配置热更新服务，监听变动文件范围等

{
  "ignore": ["node_modules", "build", "out"]
}

9. 使用 electron-builder 打包

要兼容 win7 系统，electron 版本必须降级，不能使用最新的版本。

我是用的是 21.4.4。

而且对于 win 系统，32 位和 64 位打包配置是不一样的，如果需要兼容两者的话，直接用packWin32命令打包即可，打包更低的版本。

整体 package.json 配置如下所示：

"scripts": {
  "packOs": "electron-builder --mac", // mac系统打包命令
  // win64位系统打包命令；不能在32位系统中安装，安装时会报错：需要64位操作系统
  "packWin64": "electron-builder --win --x64",
  // win32位系统打包命令，可以在64位系统中安装
  "packWin32": "electron-builder --win --ia32"
},
"build": {
  "productName": "demo", // 应用名称
  // 是否压缩build文件夹。调试时，可配置为false，查看是否正确打包
  "asar": true,
  // 自定义生成exe安装包名称
  "artifactName": "${productName}-setup-${version}.${ext}", 
  "files": [ // 打包文件范围
    "build/**/*", // 项目打包后的文件夹
    "./main.js" // 入口文件
  ],
  "extraMetadata": {
    "main": "./main.js"
  },
  "nsis": {
      "oneClick": false, // 是否一键安装
      "allowToChangeInstallationDirectory": true, // 是否允许修改安装目录
    },
},
"devDependencies": {
  "electron": "21.4.4", // electron版本需要固定
  "electron-builder": "24.6.4",
},

icon图标替换

icon图标生成网站为www.logosc.cn/logo/favico… 图标不正确 启动图标也显示不了

参考文档：

avatar
文章
阅读
粉丝