React+Electron封装并打包成桌面应用

0、react工程建立

react工程建立见： 一个react工程的建立

1、安装electron

项目目录下：

npm install -save electron

2、main.js

项目更目录下载添加main.js,基本内容：

const { app, BrowserWindow,
    ipcMain
} = require('electron');

var net = require('net');



let win;

const createWindow = () => {
    win = new BrowserWindow({
        width: 800,
        height: 600
    });

    const indexPageURL = `file://${__dirname}/dist/index.html`;
    win.loadURL(indexPageURL);

    win.on('closed', () => {
        win = null
    });
}

app.on('ready', createWindow);

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

app.on('activate', () => {
    if (!win) {
        createWindow();
    }
});

3、 配置 package.json

增加：

{
  "name": "demo",
  "version": "0.1.0",
  "private": true,
  "main": "main.js", // 这里 配置启动文件
  "dependencies": {
    "electron": "^6.0.12",
    "react": "^16.10.2",
    ……

4、webpack配置

增加：

    target: 'electron-renderer',

5、electron-packager

npm install electron-packager --save-dev

在package.json添加：

electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>

• location of project: 项目的本地地址
• location of project: 项目名称，
• platform: 打包成的平台
• architecture: 使用 x86 还是 x64 还是两个架构都用
• electron version: electron 的版本

 "packager": "electron-packager ./dist caseproject --platform=win32 --arch=x64 --out ./OutApp --app-version 1.0.0 --overwrite"

打包后的resources->app目录下

|——dist //构建后的代码文件
|——main.js
|——package.json

参考链接：https://blog.csdn.net/qq_25881261/article/details/81559794

更多