当前位置：首页 > news >正文

electron+react+esbuild入门项目

news 2025/10/15 9:11:09

实验环境

VS code
WSL（Windows自带的Linux）

架构说明

由于我们是用electron构建桌面应用，所以不需要什么开发服务器，更不需要vite这些脚手架搭建。直接用esbuild编译JSX代码即可。Joplin这个开源的笔记系统正是这么做的，它在github上有51K的star。

项目结构

tree -I node_modules
.
├── app.jsx
├── index.html
├── main.js
└── package.json

安装依赖

npm i react react-dom
npm i -D electron esbuild

app.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';function MyButton() {return (<button>按钮</button>);
}function MyApp() {return (<div><h1>hello</h1><h1>你好</h1><MyButton /></div>);
}const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyApp />);

index.html

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /></head><body><h1>Hello from Electron renderer!</h1><p>👋</p><div id="root"></div><script src="./out.js"></script></body>
</html>

main.js

const { app, BrowserWindow } = require('electron/main')const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: false,contextIsolation: true},// 针对X server转发的优化show: false})win.loadFile('index.html')// 窗口准备好后再显示，避免X server转发问题win.once('ready-to-show', () => {win.show()})
}app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow()}})
})app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}
})

package.json

上面用npm安装过依赖应该会自动生成一个package.json，添加start脚本

{"main": "main.js","scripts": {"start": "esbuild app.jsx --bundle --outfile=out.js && electron . --disable-gpu"},"devDependencies": {"electron": "^38.2.2","esbuild": "0.25.10"},"dependencies": {"react": "^18.2.0","react-dom": "^18.2.0"}
}