electron + ant design pro + electron-builder初尝试
electron 客户端前言&需求
公司最近一个项目不适合B端访问，产品经理在需求评审时提高最理想的是做一个PC的客户端，但是公司没得做PC客户端的人，咋办？来了，是时候装B了。
咳咳，那个，那个，我来，我来搞定。
正文
1.涉及技术
公司的技术栈是react, 项目是后台，框架必然选择阿里的ant design pro,打包工具electron-builder。
2.创建项目
创建一个ant design pro项目，当然使用官方的脚手架。
yarn create umi Select the boilerplate type (Use arrow keys) ❯ ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block. app - Create project with a simple boilerplate, support typescript. block - Create a umi block. library - Create a library with umi. plugin - Create a umi plugin.复制代码
下面就根据自身情况去选择。
OK，项目跑起来，正文开始了。
3. 项目改造成electron
第一步 ：项目根目录(src同级)创建main.js。作用：electron 入口配置
const {app, BrowserWindow, globalShortcut} = require('electron')
const path = require('path')
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
},
nodeIntegration: true,
webSecurity: false,
allowRunningInsecureContent: true
})
// 加载应用----react 打包
// mainWindow.loadURL(path.join('file://', __dirname, 'ant/index.html'))
// 加载应用----适用于 react 开发时项目
mainWindow.loadURL('http://localhost:8000/');
// 打开调试.
// mainWindow.webContents.openDevTools()
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// Quit when all windows are closed.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})复制代码上面一段代码关注三点：
第一点： 配置项目打包后入口文件。(这个路径后面会提到)
mainWindow.loadURL(path.join('file://', __dirname, 'ant/index.html'))复制代码第二点： 配置开发时入口，这个路径根据自己项目跑起来后的路径，方便本地调试。
mainWindow.loadURL('http://localhost:8000/');复制代码第三点： 是否开启调试工具，在electron里面也可以按快捷键打开mac: Option+Command + I
windows: Ctrl+Shift+I
mainWindow.webContents.openDevTools()复制代码
第二步：package.json 配置（增加）
{
"main": "main.js", // 配置electron 入口和前面的main.js对应，因为和package.json同级
"homepage": ".", // 解决打包后绝对路径问题
"scripts": {
"estart": "electron .", // electron 跑起来
},
}复制代码第三步：起飞????️
// 同时跑起来react项目和electron yarn start && yarn estart复制代码
electron 客户端
浏览器端
OK， 完美。
第四步： ant design pro 打包前改造
config -> config.js文件做如下修改
export default defineConfig({
// 添加一行，ant 默认是histroy路由，作用：打包出来后资源找不到(巨坑)
history: { type: 'hash' },
// 此处'/'改成'./'
publicPath: './',
})复制代码config -> plug.config.js
config.target('electron-renderer');复制代码打包前需要吧main.js里面的入口引用修改掉
// 加载应用----react 打包
mainWindow.loadURL(path.join('file://', __dirname, 'ant/index.html'))
// 加载应用----适用于 react 开发时项目
// mainWindow.loadURL('http://localhost:8000/');复制代码在执行
yarn build复制代码
因为ant 打包出来的路径是./dist和 electron 打包的./dist一致的，所以吧ant打包后的'dist'目录修改成'ant', 前面main.js里面的入口也就是'ant.index.html'。
第五步： 打包（关键）思量许久在electron-builder和electron-packager选择前者
安装electron-builder
yarn add electron-builder复制代码
package.json添加
"build": {
"appId": "name",
"mac": {
"category": "category",
"target": ["dmg","zip"]
}
},
"scripts": {
"ebuild": "electron-builder -m", // 打包mac
"ebuildw": "electron-builder --win --x64", // 打包windows
}复制代码3.特别注意 执行打包命令是需要下在对应系统的源资源，此时需要梯子(vpn),如果命令行安装此时还有一个坑，命令行要代理，后面的端口号要和你的梯子对应的代理接口一致。
export http_proxy=http://127.0.0.1:41091 export https_proxy=http://127.0.0.1:41091复制代码
最后执行
yarn ebuild or yarn ebuildw复制代码
end
作者：星辰i
链接：https://juejin.cn/post/7016901215363530783