本文,我们来讲讲如何通过 electron
运行打包文件。
我们的 Demo
环境:
angular
打包的dist
文件- MacBook Air (M1, 2020)
- Visual Studio Code
获取 dist 文件
我们来简单生成 dist
文件,根据 Ant Design of Angular 的介绍新建项目并打包即可。
PS:当然了,你也可以简单其一个
index.html
文件做演示
得到的打包项目结构如下:
很平常的一个单页应用。我们将其放在新建 electron
项目根目录下,以备后用。
新建 electron 项目
我们根据 创建您的第一个 electron 应用程序 就可以很轻松的创建 electron
应用。
我们创建项目使用到关键包 "electron": "^26.1.0"
和 "electron-packager": "^17.1.2"
。针对真实的生成环境,我们做了相关的一些调整:
1. 区分 window 和 mac 打包
我们的开发平台在 mac
上,通过执行 npm run make
可以默认是打包了 mac
平台的安装包。
针对 window
的平台,我们引入了 electron-package
来执行,比如我们编写打包命令行:
bash
"make-win": "npx electron-packager ./ custom-package-name --platform=win32 --arch=x64 --out=jimmy-dist --overwrite --icon=./static/logo.ico --ignore='out|README.md|Jenkinsfile'"
下面我们来解析下:
npx electron-packager
运行本地安装的可执行文件electron-packager
./
代表当前的目录,是要被打包的electron
应用程序所在的位置custom-package-name
自定义的最终打包的名称--platform=win32
指定目标平台是Window 32-bit
--arch=x64
指定目标架构是x64(64-bit)
--out=jimmy-dist
指定输出的目录是dist
文件夹--overwrite
如果存在相同名称的目录,则覆盖之前的打包文件--icon=./static/logo.ico
设定应用程序的图标文件路径ignore='out|README.md|Jenkinsfile'"
忽略的打包文件
2. 更改图标
上面我们也提及了更改 window
的图表 --icon=./static/logo.ico
,那么,我们可以通过设置 forge.config.js
来更改当前 mac
的图标:
javascript
packagerConfig: {
asar: true,
icon: path.resolve(__dirname, 'static/logo.ico') // build app icon
}
3. 自定义菜单栏
我们需要定制自己需要的菜单栏,那么,我们可以通过在程序中设置 menu
即可,下面的设置菜单代码可以做参考:
javascript
// create a custom menu
const createCustomMenu = () => {
const template = [
{
label: '', // for project title tag placeholder
},
{
label: '菜单',
submenu: [
{
label: '刷新',
click: () => {
BrowserWindow.getFocusedWindow().reload();
}
},
{
label: '返回',
click: () => {
if (mainWindow && mainWindow.webContents.canGoBack()) {
mainWindow.webContents.goBack();
}
}
},
{
label: '关闭',
click: () => {
app.quit();
}
}
]
},
{
label: '调试',
submenu: [
{
label: '控制台',
click: () => {
BrowserWindow.getFocusedWindow().webContents.openDevTools();
}
}
]
}
];
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
}
上面我们设置了 菜单
和 调试
的菜单。
electron 中整合打包的 dist 文件
我们运行 dist
文件,其实就是起一个本地服务就行了。这里,我们使用 http-server
来运行。
PS:当然,我们也可以使用
koa
,express
等
假设我们已经安装好了 http-server
依赖,那么,我们进入项目根目录,直接执行 http-server -p 8082 dist/
就可以在浏览器 http://localhost:8082
打开该 dist
应用。
那么,我们怎么在 electron
中运行它呢?如下:
javascript
// 开启服务
const triggerServer = (host, port, directory) => {
const server = createServer({
root: path.join(__dirname, directory) // 指定服务器根目录
});
server.listen(port, host, () => {
console.log(`Server running at http://${host}:${port}/`)
})
return server;
}
上面我们封装了个开发服务的方法,方便多个服务开启。我们只要传入 host
,port
和 directory
(打包文件的目录)即可。
在 electron
应用 ready
之后,我们开启服务:
javascript
const { createServer } = require('http-server');
app.whenReady().then(() => {
const server1 = triggerServer("localhost", "8081", "dist");
mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
webSecurity: false
},
width: 800,
height: 600,
title: 'ElectronDist',
icon: path.join(__dirname, './static/logo.png') // for window platform
});
if(process.platform === 'darwin') { // mac platform
app.dock.setIcon(path.join(__dirname, './static/logo.png'))
}
mainWindow.loadURL("http://localhost:8081")
app.on('before-quit', () => { // 记得关闭
server1.close();
});
})
在 before-quite
钩子函数,即退出之前,即可关闭服务。
我们 npm run start
运行之后,项目的效果如下图: