react项目改造为electron+react项目

·  阅读 1076

1. 安装electron依赖

npm install electron --save-dev

electron 一定要安装在 devDependencies 开发环境依赖里面,不然之后打包会有报错。(见坑)

2. 根目录新建 main.js

const { app, BrowserWindow ,ipc} = require("electron");
const path = require("path");
let mainWindow = null;
//判断命令行脚本的第二参数
const mode = process.argv[2];

// 限制只启动一个
function makeSingleInstance() {
  if (process.mas) return;
  app.requestSingleInstanceLock();
  app.on("second-instance", () => {
    if (mainWindow) {
      if (mainWindow.isMinimized()) mainWindow.restore();
      mainWindow.focus();
    }
  });
}

// 用于添加Chromium插件
function createDevTools() {
  const {
    default: installExtension,
    REACT_DEVELOPER_TOOLS,
    REDUX_DEVTOOLS,
  } = require('electron-devtools-installer');
  // 安装devtron
  const devtronExtension = require('devtron');
  devtronExtension.install();
  // 安装React开发者工具
  installExtension(REACT_DEVELOPER_TOOLS);
  installExtension(REDUX_DEVTOOLS);
}

// createWindow()方法来将index.html加载进一个新的BrowserWindow实例。
function createWindow() {
  const windowOptions = {
    width: 1000,
    height: 700,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
    // frame:false, // 有没有边框
  };
  mainWindow = new BrowserWindow(windowOptions);
  //判断是否是开发模式
  if (mode === "dev") {
    mainWindow.loadURL("http://localhost:8002/"); // http://localhost:8002/ 前端开发环境地址
    mainWindow.webContents.openDevTools(); // 自动打开控制台
    createDevTools();
  } else { 
    mainWindow.loadURL(path.join("file://", __dirname, "/build/index.html"));
  }
  //接收渲染进程的信息
  ipc.on("min", function () {
    mainWindow.minimize();
  });
  ipc.on("max", function () {
    mainWindow.maximize();
  });
  ipc.on("login", function () {
    mainWindow.maximize();
  });

  mainWindow.on("closed", () => {
    mainWindow = null;
  });
}

// 限制器
makeSingleInstance();

// app主进程的事件和方法
// 只有在ready事件被激发后才能创建浏览器窗口
app.whenReady().then(() => {
  createWindow();
  // 针对macos系统,在没有浏览器窗口打开的情况下调用你仅存的 createWindow() 方法
  app.on("activate", function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});
// 关闭所有窗口通常会完全退出一个应用程序
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});
app.on("activate", () => {
  if (mainWindow === null) {
    createWindow();
  }
});
module.exports = mainWindow;
复制代码

3. 根目录新建 preload.js

// 预加载脚本
// 预加载脚本在渲染器进程加载之前加载,并有权访问两个 渲染器全局 (例如 window 和 document) 和 Node.js 环境
window.addEventListener("DOMContentLoaded", () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector);
      if (element) element.innerText = text;
    };
    for (const dependency of ["chrome", "node", "electron"]) {
      replaceText(`${dependency}-version`, process.versions[dependency]);
    }
  });
复制代码

4. 配置package.json

(1)更改main属性

{
     "main": "main.js", // 有的改一下,没有的加一下
}
复制代码

(2)配置electron启动命令

{
    "scripts": {
        "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js --progress --hot",
        "webpack": "webpack --progress",
        "electron:dev": "electron . dev", // 开发环境下使用
        "electron": "electron ."
    },
}
复制代码

5. 启动electron

npm run electron

如果成功了,恭喜你,可以继续下一步了。

6. 打包

(1)引入electron-builder打包工具

npm install electron-builder --save-dev

electron-builderelectron 一样,一定要安装在 devDependencies 开发环境依赖里面,不然之后打包会有报错。(见坑)

(2)package.json配置打包属性和命令

{
    "build": {
        "productName":"zwtzzwwtt", //项目名 这也是生成的exe文件的前缀名
        "appId": "1997", // 包名 
        "directories": {
          "output": "builder" // 输出文件夹
        },
        "win": {
          "target": [
            "nsis", // 目标封装类型,默认使用niss,win平台一般也是用这个,可写可不写
            "zip"
          ]
        },
        // niss一般用来配置安装和卸载程序的
        "nsis": {
          "shortcutName": "makalo-cnblog-tool",  // 用于所有快捷方式的名称。默认为应用程序名称
          "oneClick": false,  // 是创建一键安装程序还是辅助安装程序
          "perMachine": true,  // 是否开启安装时权限限制(此电脑或当前用户)true 表示此电脑,false代表当前用户
          "allowElevation": true,  // 仅辅助安装程序有效。允许请求提升。如果为false,则用户将不得不以提升的权限重新启动安装程序
          "allowToChangeInstallationDirectory": true,  // 仅辅助安装程序有效。是否允许用户更改安装目录
          "createDesktopShortcut": true, // 创建桌面图标
          "createStartMenuShortcut": true, // 创建开始菜单图标
        }
        "files": [
          "build/**/*", // 需要打包的前端已打包好的文件
          "main.js" // 主文件main.js
        ]
    },
    "scripts": {
        "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js --progress --hot",
        "webpack": "webpack --progress", // 打包前端页面
        "electron": "electron .",
        "dist": "electron-builder" // 打包electron
    },
}
复制代码

(3)打包前端代码

npm run webpack

(4)打包electron

npm run dist

(5)安装exe文件

7. 坑

(1)执行electron-builder命令时,会报错误导致打包中断

Package "electron-builder" is only allowed in "devDependencies". Please remove it from the "dependencies" section in your package.json

Package "electron" is only allowed in "devDependencies". Please remove it from the "dependencies" section in your package.json.

提示 electronelectron-builder 应该放在 devDependencies 下面

这也是上面在安装 electronelectron-builder 依赖的时候,提醒的说一定要把这两个安装在开发环境下

解决办法:npm install electron electron-builder --save-dev

(2)打包过程中会出现某些zip文件下载失败的报错

例如:https://github.com/electron/electron/releases/download/v13.1.6/electron-v13.1.6-win32-x64.zip (这些资源国外的,下载特别慢)

解决办法:可以通过更改 npmconfig 来加快下载速度(最后的 / 别漏了)

npm config set ELECTRON_MIRROR " https://npm.taobao.org/mirrors/electron/ "

分类:
前端
标签: