electron + react打包一个桌面应用

1. react 创建项目

https://blog.csdn.net/Tom__cy/article/details/105860456

2. 项目创建完后安装electron环境

1. npm install -save electron

3. electron 主要运行环境在main.js

## 1. mainWindow.loadURL("http://localhost:3000/");  //这个主要用于开发环境

## 2. mainWindow.loadURL(
        url.format({
            pathname: path.join(__dirname, "./build/index.html"),
            protocol: "file:",
            slashes: true,
        })
    );
   //这个主要用于生产环境 build


// 引入electron并创建一个Browserwindow
const { app, BrowserWindow } = require("electron");
const path = require("path");
const url = require("url");
// "package": "electron-packager ./ package -win=x64 --out=build --arch=x64 --electron-version 8.2.5 --overwrite",
// 保持window对象的全局引用,避免JavaScript对象被垃圾回收时,窗口被自动关闭.
let mainWindow;

function createWindow() {
    //创建浏览器窗口,宽高自定义具体大小你开心就好
    mainWindow = new BrowserWindow({ width: 400, height: 300 });

    // 加载应用-----  electron-quick-start中默认的加载入口
    mainWindow.loadURL(
        url.format({
            pathname: path.join(__dirname, "./build/index.html"),
            protocol: "file:",
            slashes: true,
        })
    );

    // 加载应用----适用于 react 项目
    // mainWindow.loadURL("http://localhost:3000/");

    // 打开开发者工具，默认不打开
    // mainWindow.webContents.openDevTools()

    // 关闭window时触发下列事件.
    mainWindow.on("closed", function () {
        mainWindow = null;
    });
}

// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
app.on("ready", createWindow);

// 所有窗口关闭时退出应用.
app.on("window-all-closed", function () {
    // macOS中除非用户按下 `Cmd + Q` 显式退出,否则应用与菜单栏始终处于活动状态.
    if (process.platform !== "darwin") {
        app.quit();
    }
});

app.on("activate", function () {
    // macOS中点击Dock图标时没有已打开的其余应用窗口时,则通常在应用中重建一个窗口
    if (mainWindow === null) {
        createWindow();
    }
});

// 你可以在这个脚本中续写或者使用require引入独立的js文件.

4. package.json 配置

  "main": "main.js",   //项目启动加载main.js
   "homepage": ".",   // 项目打包路径配置
    "scripts": {
        "electron-start": "electron .",   //开发环境运行
        "package": " electron-packager . my-app –darwin –out out_dir –arch=x64 --overwrite",   // 打包成exe  需要打包配置 看5
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },

5. 项目打包electron-packager

# 当前目录下安装electron-packager包
npm install electron-packager --save-dev
# 安装electron-packager命令
npm install electron-packager -g

打包工具electron-packager的一般语法为：

electron-packager <应用目录> <应用名称> <打包平台> –out <输出目录> <架构> <应用版本>

"package": " electron-packager . my-app –darwin –out out_dir –arch=x64 --overwrite",

electron-packager  打包命令
.     ： 目录
my-app –darwin ：应用名称
–darwin  ： 打包平台 我mac
–out out_dir : 输出目录
–arch=x64 :架构
应用版本 : 我没写。系统默认会用你下载的版本
--overwrite ： 是否覆盖你之前的

6 最后启动。

npm run package

7. 打包速度慢解决

ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ 

在npm run package 前面加  还有个空格

ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ npm run package