Electron开发 umi react 应用

Electron 是一个跨平台桌面端的应用框架，electron 底层依赖3 个核心组件 Chromium、Node.js、Electron API，Chromium 是 Chrome 的开源版本，Node.js可以编写后台应用程序，集成 Node.js 到 Electron，使得 Electron 可以使用 Node.js 提供的功能，例如访问本地文件和数据库。

Electron可以理解成一个应用的壳子，Web应用自身是不能访问本地资源个无论是文件还是数据库，唯一可选择的方案是 local storage，但是 local storage是有大小限制的，大多数浏览器都只能存储 5M，只能对少量的数据做缓存，大量的业务数据肯定是不能满足的。

Electron 通过主进程和渲染进程实现Web 与本地资源的互相访问，下面一个例子实现 Web 调用主线程保存文件的功能。

初始化并安装依赖

初始化 Electron 项目并安装依赖

复制代码

#在目标目录下运行
npm init -y
npm install --save-dev electron

修改配置文件

修改项目配置文件，入口文件，修改 main.js，添加启动命令：start: "electron ."

复制代码

{
  "name": "electron",
  "version": "1.0.0",
  "main": "main.js",
  "keywords": [],
  "author": "",
  "scripts": {
    "start": "electron ."
  },
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "electron": "^30.0.1"
  }
}

创建主进程文件以及网页

创建项目文件

主进程文件

#main.js
const { ipcMain, app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'), //运行接口定义脚本
}
});
复制代码
```
 mainWindow.loadFile('index.html');
```
}

app.whenReady().then(createWindow);

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

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

const os = require('os');
const fs = require('fs');
const tmpFilePath = path.join(os.tmpdir(), 'elec.txt');

ipcMain.on('save-file', (event, text) => {
fs.writeFile(tmpFilePath, text, (err) => {
if (err) {
console.error('File write failed:', err);
} else {
console.log('File saved successfully');
}
});
});
页面文件
<!DOCTYPE html> <html> <head> <title>My Electron App</title> </head> <body>
保存文件
<button id="saveButton">Save to File</button>
复制代码
```
 <script src="renderer.js"></script>
```
</body> </html>
定义 IPC API，定义暴露给页面的 API

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld(
'api', {
saveFile: (text) => ipcRenderer.send('save-file', text)
}
);
页面逻辑

// renderer.js
document.getElementById('saveButton').addEventListener('click', function () {
const text = document.getElementById('textInput').value;
window.api.saveFile(text);
});

运行

输入测试信息，提交之后，可以看到文件生成成功。

umi react 开发 Electron 应用

umi 默认支持 electron 模板，直接安装运行。

复制代码

pnpm create umi --template electron

不知为何呢缺了几个依赖，需要安装之后才能成功启动。

复制代码

pnpm install clear-module --save-dev
pnpm install lodash  --save-dev
pnpm install chokidar  --save-dev

umi electron 项目打开项目的位置是本地开发网址，这是为什么umi electro可以热加载。

umi electron 有两个目录， .electron 是开发环境相关文件，.electron-production 是生产环境相关文件。

Electron 框架使用方便，按照前端项目开放方式，需要和原生系统进行整合或者交互的，通过Node.js 进行实现。