本片文章将从0到1简单介绍，electron项目的初始化，开发配置，打包配置
项目初始化&开发配置
1.创建一个react的项目（可以使用官方的create-react-app的脚手架创建）
2.安装electron(注意一定是devDependencies，否则后面打包会报错)
npm i electron -D
3.写一个electron的启动文件（main.js）
const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')
const ENV = process.env.NODE_ENV;
function createWindow () {
const win = new BrowserWindow({
800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
if(ENV=='development') { //区分开发和生产环境
win.loadURL('http://localhost:3000/')
}
else {
// 加载应用----react 打包
win.loadURL(url.format({
pathname: path.join(__dirname, './build/index.html'),
protocol: 'file:',
slashes: true
}))
}
win.webContents.openDevTools()
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
4.配置package.json
{
"main": "main.js",//指定入口的文件
"scripts"：{ //配置启动脚本
"electron-start": "electron .", //生产环境
"electron-start:dev": "cross-env NODE_ENV=development electron ." //开发环境，这样改动代码会热更新
}
}
5.同时启动我们的客户端和服务端进行开发即可
//开发环境 npm start npm run electron-start:dev //生产环境 npm run build npm run electron-start
**注意**：生产环境启动会出现文件找不到的情况，是因为我们的资源在html是根路径的方式插入的（/static/js/main.629b1443.chunk.js），所以需要配置成相对路径(./static/js/main.629b1443.chunk.js),在package.json中添加homepage配置项
{
"homepage": ".",
}
项目打包
electron-builder
1.安装(指定版本，否则打包会出错，也安装到devDependencies）
npm i electron-builder@21.2.0 -D
2.package.json配置build
"build": {
"appId": "xxx.wss.app", //随便填
"directories": {
"output": "dist" //打包之后输出的目录
},
"win": { //windows配置
"target": [
"nsis",
"zip"
],
"icon": "icon.ico"
},
"files": [ //打包包含的文件
"build/**/*", //react代码打包的output
"main.js" //electron的入口js
],
"extends": null //不写的话会报错
}
3.配置执行脚本
{
“scripts”： {
"pack": "electron-builder"
}
}
4.执行打包命令
npm run pack
5.直接打开打包后的.exe文件即可
参考文献：
https://www.electronjs.org/docs