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
OK, 完美。
第四步: ant design pro 打包前改造
- config -> config.js文件做如下修改
export default defineConfig({
// 添加一行,ant 默认是histroy路由,作用:打包出来后资源找不到(巨坑)
history: { type: 'hash' },
// 此处'/'改成'./'
publicPath: './',
})
2. config -> plug.config.js
config.target('electron-renderer');
3. 打包前需要吧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
2. 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