electron-tabs 打包方法

2022-06-15 22:07:36

记录下如何打包 electron 标签页示例项目

最近公司项目需求涉及到 electron 应用的标签页实现,所以找到了这个开源的页签实现方式。

# electron-tabs 介绍

首先项目实现的是一个电子应用程序的简单选项卡 Demo。

内置的 npm script 仅支持有限的几个命令。

该项目具有以下特性:

  • 兼容 Electron ≥ 17。
  • 🔒 符合 Electron 安全建议(无需 nodeIntegration: true.
  • 🧰 使用 TypeScript 和 Web 组件编写。
  • ✋ 支持开箱即用的拖放。
  • 🎨 轻松定制

如果直接打包会提示错误,所以需要进行一定的改造。

# 改造方法

本地克隆仓库:git clone git@github.com:brrd/electron-tabs.git

  1. 依赖安装

打包工具我们选取 electron-builder
修改 package.json,在 devDependencies 加入如下依赖之后执行 npm i

"electron-builder": "^22.10.5",
"electron-builder-squirrel-windows": "^22.10.5",
  1. 增加主程序 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

# 效果演示

# 参考资料

本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。

扫描下方二维码阅读当前文章

浏览器、微信扫码

评 论:

好文推荐
每天进步一点点~