记录下如何打包 electron 标签页示例项目
最近公司项目需求涉及到 electron 应用的标签页实现，所以找到了这个开源的页签实现方式。
# electron-tabs 介绍
首先项目实现的是一个电子应用程序的简单选项卡 Demo。
内置的 npm script 仅支持有限的几个命令。
该项目具有以下特性：
- 兼容 Electron ≥ 17。
- 🔒 符合 Electron 安全建议（无需 nodeIntegration: true.
- 🧰 使用 TypeScript 和 Web 组件编写。
- ✋ 支持开箱即用的拖放。
- 🎨 轻松定制
如果直接打包会提示错误，所以需要进行一定的改造。
# 改造方法
本地克隆仓库：git clone git@github.com:brrd/electron-tabs.git
- 依赖安装
打包工具我们选取 electron-builder。
修改 package.json，在 devDependencies 加入如下依赖之后执行 npm i：
"electron-builder": "^22.10.5",
"electron-builder-squirrel-windows": "^22.10.5",
- 增加主程序
main.js并修改程序入口。
这里因为项目本身核心在于静态的 electron-tabs.html 页面，所以要增加主程序去启动浏览器进程对象加载 Demo 页面。
项目根目录下新建 main.js：
'use strict';
let electron = require('electron');
let app = electron.app;
let BrowserWindow = electron.BrowserWindow;
const isDevelopment = process.env.NODE_ENV !== 'production';
async function createWindow() {
const win = new BrowserWindow({
width: 1100,
height: 800,
webPreferences: {
webviewTag: true,
nodeIntegration: true,
},
});
win.on('ready-to-show', function() {
win.show();
win.focus();
});
// Load the index.html when not in development
win.loadFile('./demo/electron-tabs.html');
}
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
app.on('ready', async () => {
createWindow();
});
if (isDevelopment) {
if (process.platform === 'win32') {
process.on('message', (data) => {
if (data === 'graceful-exit') {
app.quit();
}
});
} else {
process.on('SIGTERM', () => {
app.quit();
});
}
}
接着修改 package.json 里面的 main 属性为 main.js。
scripts 中增加打包命令:
"build:win64": "electron-builder --win --x64",
"build:mac": "electron-builder --mac --dir=outMac"
# 打包
接着我们就可以愉快地进行打包了。
npm run build:mac
