electron 基于 create-react-app 项目架构配置

本文最后更新于 2024年4月11日 上午

创建项目

  1. 使用react脚手架创建基础项目
1
npx create-react-app my-electron-app --template typescript
  1. 安装 electron

📢 在安装 electron 需要科学上网，这样拉的依赖会快些

1
npm i electron --save-dev
  1. 暴露项目的webpack配置
1
npm run eject

  1. 安装 sass & node-sass

📢 注意这里需要查看本机电脑安装的 node版本，安装对应的 sass-loader版本，我这里机器的node版本为 v18.17.0 

1
npm i sass-loader --save-dev
  1. 配置 electron 环境

在根目录新建 main.js 内容如下：

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
const { app, BrowserWindow, Menu, ipcRenderer } = require('electron')
// const path = require('path')
// const isDev = require("electron-is-dev");
// const path = require("path");

// const { notification } = require("./config");

let mainWindow

// 创建窗体
function createWindow() {
  mainWindow = new BrowserWindow({
    width: 760,
    height: 460,
    titleBarStyle: 'hiddenInset',
    trafficLightPosition: { x: 10, y: 10 },
    titleBarOverlay: true,
    webPreferences: {
      nodeIntegration: true,
      // preload: path.join(__dirname, 'preload.js')
    },
    frame: false,
    resizable: false,
    useContentSize: false
  })

  // mainWindow.loadURL(
  //   isDev
  //     ? "http://localhost:3890/"
  //     : `file://${path.join(__dirname, "./public/index.html")}`
  // );

  mainWindow.loadURL('http://localhost:3890/')
  // mainWindow.loadFile(`build/index.html`)
  // mainWindow.on("closed", () => {
  //   mainWindow = null;
  // });

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

// app.on('activate', () => {
//   ipcRenderer.on('move', (event, x, y) => {
//     ubWindow.setPosition(x, y)
//   })
//   // 初始化
//   ipcRenderer.sendTo(ubWindow.webContents.id, 'init')
// })

// 新建窗口
const dockMenu = Menu.buildFromTemplate([
  {
    label: '新建窗口',
    click() {}
  }
])

// 通知窗体
// function showNotification() {
//   new Notification({
//     title: notification.title,
//     body: notification.content,
//   }).show();
// }

// app.on("ready", showNotification);

// app.on("ready", createWindow);

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

// app.on("activate", () => {
//   if (mainWindow == null) {
//     createWindow();
//   }
// });

app.whenReady().then(() => {
  createWindow()

  if (process.platform === 'darwin') {
    app.dock.setMenu(dockMenu)
  }

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

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

  1. 配置启动脚本
1
2
3
4
5
6
7
8
9
10
11
12
"scripts": {
    "start": "PORT=3890 react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject",
    "electron": "electron .",
    "dev": "concurrently \"wait-on http://localhost:3890 && npm run electron\" \"cross-env BROWSER=none npm start\"",
    "pack": "electron-builder",
    "builder:mac": "rimraf dist && electron-builder build --mac --x64 --arm64",
    "builder:win": "rimraf dist && electron-builder build --win --x64",
    "pack:dir": "electron-builder --dir"
}
electron
#electron
electron 基于 create-react-app 项目架构配置
https://dev.dgdream.online/2024/04/06/electron 基于 create-react-app 项目架构配置/
作者
执念
发布于
2024年4月6日
更新于
2024年4月11日
许可协议