1

Electron是什么?

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

前言

最近尝试在ubuntu22.04中使用Electron开发,按照官方示例走了一遍流程,就整体流程做一下总结。

镜像

在安装过程中,electron 模块会通过 electron-download 为您的平台下载 Electron 的预编译二进制文件。这将通过访问 GitHub 的发布下载页面来完成。由于访问github比较慢,可以设置国内的镜像源来加快速度。

在linux中,需要添加环境变量ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

安装

对应版本:https://releases.electronjs.org/

使用官方案例

直接下载electron-quick-start
然后npm install 即可安装。
使用npm start 启动

手动使用

见官方文档快速入门
需要注意package.json中的authordescription是必填项。

electron-forge打包

介绍

Electron Forge is a tool for packaging and publishing Electron applications. 它将 Electron 的构建工具生态系统统一到一个可扩展的界面中,这样每个人都可以直接上手制作 Electron 应用。

Electron Forge is an all-in-one tool for packaging and distributing Electron applications. It combines many single-purpose packages to create a full build pipeline that works out of the box, complete with code signing, installers, and artifact publishing. For advanced workflows, custom build logic can be added in the Forge lifecycle through its Plugin API. Custom build and storage targets can be handled by creating your own Makers and Publishers.

除了electron-forge,你也可以使用其他的工具。

打包流程

// 安装依赖
npm install --save-dev @electron-forge/cli

// 将现有的Electron应用程序导入Electron Forge工作流,自动配置并添加必要的依赖项和文件。
npx electron-forge import

// 根据 forge.config.js 执行打包
npm run make

打包完成后可以在out文件夹中看到待分发的文件。

打包需要注意的是:

  1. Mac平台运行程序只能在MacOS上打包
  2. Windows平台运行程序在linux以及MacOS上打包时需要先安装 mono 以及 wine

image.png
image.png

当我安装完mono和wine之后。尝试在linux上使用npm run make打包时,发现只会打deb和rpm的包。这是我的forge.config.jsmakers项的内容

makers: [
  {
    name: '@electron-forge/maker-squirrel',
    config: {},
  },
  {
    name: '@electron-forge/maker-zip',
    platforms: ['darwin'],
  },
  {
    name: '@electron-forge/maker-deb',
    config: {},
  },
  {
    name: '@electron-forge/maker-rpm',
    config: {},
  },
]

尝试之后发现单独运行npm run make -- --platform win32可以打windows的包。


chshihang
116 声望13 粉丝