electron-tabs 打包方法

薛定喵君

发布于 2022-08-30 15:05:08

8730

发布于 2022-08-30 15:05:08

文章被收录于专栏：薛定喵君薛定喵君

记录下如何打包 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

# 效果演示

//player.bilibili.com/player.html?aid=342595925&bvid=BV1d94y127dE&cid=747737269&page=1

# 参考资料

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-06-15 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度