create-react-app + electron开发桌面版应用

发表于 | 浏览 次
目标

使用create-react-app 来配置electron 并打包,当然不想折腾环境的可以直接使用
模板来搭建环境呢.我选择了折腾,这里记录其中的关键点

步骤

  1. 使用create-react-app 创建项目
1
2
3
4
5
6
7
npx create-react-app react-electron
cd react-electron
npm install electron electron-builder image-size url --save-dev
// electron基础包
// electron-builder打包工具
// image-size 提供桌面图标的lib
// url electron的文件路径需要的东西
  1. 在public里创建electron.js文件(可以copy官网的,下面是我的最终版本),一定要放在public目录下,因为cra会把这个文件夹的文件复制到build目录下的呢
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
const electron = require('electron');
const platform = require('os').platform(); // 获取平台：https://nodejs.org/api/os.html#os_os_platform
// 控制app生命周期.
const app = electron.app;
// 浏览器窗口.
const BrowserWindow = electron.BrowserWindow;
const Menu = electron.Menu;

const path = require('path');
const url = require('url');
const ipc = electron.ipcMain
let mainWindow;

ipc.on('app close window', (sys, msg) => {
    console.log(sys, msg)
    mainWindow.close()
})

console.log(platform);

const setupMenu = () => {
    const menu = new Menu();
    mainWindow.setMenu(menu);

    const template = [{
        label: "Application",
        submenu: [{
            label: "About Application",
            selector: "orderFrontStandardAboutPanel:"
        },
            {
                type: "separator"
            },
            {
                label: "Quit",
                accelerator: "Command+Q",
                click: () => {
                    quit();
                }
            }
        ]
    }, {
        label: "Edit",
        submenu: [{
            label: "Undo",
            accelerator: "CmdOrCtrl+Z",
            selector: "undo:"
        },
            {
                label: "Redo",
                accelerator: "Shift+CmdOrCtrl+Z",
                selector: "redo:"
            },
            {
                type: "separator"
            },
            {
                label: "Cut",
                accelerator: "CmdOrCtrl+X",
                selector: "cut:"
            },
            {
                label: "Copy",
                accelerator: "CmdOrCtrl+C",
                selector: "copy:"
            },
            {
                label: "Paste",
                accelerator: "CmdOrCtrl+V",
                selector: "paste:"
            },
            {
                label: "Select All",
                accelerator: "CmdOrCtrl+A",
                selector: "selectAll:"
            }
        ]
    }];

    Menu.setApplicationMenu(Menu.buildFromTemplate(template));
};

function createWindow() {
    // 创建一个浏览器窗口.
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,  //允许使用node的方式引入
            webSecurity: false, // 允许使用本地资源
        },
        backgroundColor: '#B1FF9D',
    });

    // 这里要注意一下，这里是让浏览器窗口加载网页。
    // 如果是开发环境，则url为http://localhost:3000（package.json中配置）
    // 如果是生产环境，则url为build/index.html
    const startUrl = process.env.ELECTRON_START_URL || url.format({
        pathname: path.join(__dirname, '/../build/index.html'),
        protocol: 'file:',
        slashes: true
    });
    setupMenu()
    // 加载网页之后，会创建`渲染进程`
    mainWindow.loadURL(startUrl);

    // 打开chrome浏览器开发者工具.
    if (startUrl.startsWith('http')) {
        mainWindow.webContents.openDevTools();
    }
    mainWindow.webContents.openDevTools();
    mainWindow.on('closed', function () {
        mainWindow = null
    });
}

app.on('ready', createWindow);

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

app.on('activate', function () {
    if (mainWindow === null) {
        createWindow();
    }
});
  1. 修改package.json main字段修改的是程序的入口, build为electron-builder的打包的一些配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"main": "./public/electron.js",
"homepage": ".",
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "electron": "electron .",
  "electron-dev": "ELECTRON_START_URL=http://localhost:3000/ electron .",
  "packager": "npm run build && rm -rf dist && electron-builder --mac"
},
"build": {
  "productName": "example",
  "appId": "com.example.server",
  "files": [
    "build/**/*",
    "package.json"
  ],
  "directories": {
    "buildResources": "public"
  }
}
  1. npm start 启动react项目
  2. npm run electron-dev 启动electron项目
  3. npm run build 打包react项目
  4. npm run electron 查看react打包的结果
  5. npm run package 打包mac应用(win需要再配置一下)
结果演示

源码
material-ui self host font

关于我

区块链技术痴迷的程序猿一枚，如果你喜欢我的文章，可以加上微信共同学习，共同进步。