Skip to main content

Snapcraft 指南 (Linux)

¥Snapcraft Guide (Linux)

本指南提供了有关如何为任何 Snapcraft 环境（包括 Ubuntu 软件中心）打包 Electron 应用的信息。

¥This guide provides information on how to package your Electron application for any Snapcraft environment, including the Ubuntu Software Center.

背景和要求​

¥Background and Requirements

Canonical 旨在与更广泛的 Linux 社区一起解决 snapcraft 项目中的许多常见软件安装问题。Snap 是容器化软件包，包含所需的依赖、自动更新，并且无需修改系统即可在所有主要 Linux 发行版上运行。

¥Together with the broader Linux community, Canonical aims to fix many of the common software installation problems with the snapcraft project. Snaps are containerized software packages that include required dependencies, auto-update, and work on all major Linux distributions without system modification.

创建 .snap 文件有三种方法：

¥There are three ways to create a .snap file:

  1. 使用 Electron Forge 或 electron-builder，snap 附带的这两个工具都支持开箱即用。这是最简单的选择。

    ¥Using Electron Forge or electron-builder, both tools that come with snap support out of the box. This is the easiest option.

  2. 使用 electron-installer-snap，它获取 @electron/packager 的输出。

    ¥Using electron-installer-snap, which takes @electron/packager's output.

  3. 使用已创建的 .deb 包。

    ¥Using an already created .deb package.

在某些情况下，你需要安装 snapcraft 工具。此处 提供了为你的特定发行版安装 snapcraft 的说明。

¥In some cases, you will need to have the snapcraft tool installed. Instructions to install snapcraft for your particular distribution are available here.

使用 electron-installer-snap​

¥Using electron-installer-snap

该模块的工作方式与 electron-winstaller 和类似模块类似，其范围仅限于构建 snap 包。你可以使用以下命令安装它：

¥The module works like electron-winstaller and similar modules in that its scope is limited to building snap packages. You can install it with:

npm install --save-dev electron-installer-snap

步骤 1：打包你的 Electron 应用​

¥Step 1: Package Your Electron Application

使用 @electron/packager（或类似工具）打包应用。确保删除最终应用中不需要的 node_modules，因为任何实际不需要的模块都会增加应用的大小。

¥Package the application using @electron/packager (or a similar tool). Make sure to remove node_modules that you don't need in your final application, since any module you don't actually need will increase your application's size.

输出应该大致如下所示：

¥The output should look roughly like this:

.
└── dist
    └── app-linux-x64
        ├── LICENSE
        ├── LICENSES.chromium.html
        ├── content_shell.pak
        ├── app
        ├── icudtl.dat
        ├── libgcrypt.so.11
        ├── libnode.so
        ├── locales
        ├── resources
        ├── v8_context_snapshot.bin
        └── version

步骤 2：运行 electron-installer-snap​

¥Step 2: Running electron-installer-snap

从 PATH 中有 snapcraft 的终端，使用唯一必需的参数 --src 运行 electron-installer-snap，这是在第一步中创建的打包 Electron 应用的位置。

¥From a terminal that has snapcraft in its PATH, run electron-installer-snap with the only required parameter --src, which is the location of your packaged Electron application created in the first step.

npx electron-installer-snap --src=out/myappname-linux-x64

如果你有现有的构建管道，则可以以编程方式使用 electron-installer-snap。有关详细信息，请参阅 Snapcraft API 文档。

¥If you have an existing build pipeline, you can use electron-installer-snap programmatically. For more information, see the Snapcraft API docs.

const snap = require('electron-installer-snap')

snap(options)
  .then(snapPath => console.log(`Created snap at ${snapPath}!`))

将 snapcraft 与 @electron/packager 结合使用​

¥Using snapcraft with @electron/packager

步骤 1：创建示例 Snapcraft 项目​

¥Step 1: Create Sample Snapcraft Project

创建项目目录并将以下内容添加到 snap/snapcraft.yaml：

¥Create your project directory and add the following to snap/snapcraft.yaml:

name: electron-packager-hello-world
version: '0.1'
summary: Hello World Electron app
description: |
  Simple Hello World Electron app as an example
base: core22
confinement: strict
grade: stable

apps:
  electron-packager-hello-world:
    command: electron-quick-start/electron-quick-start --no-sandbox
    extensions: [gnome]
    plugs:
    - browser-support
    - network
    - network-bind
    environment:
      # Correct the TMPDIR path for Chromium Framework/Electron to ensure
      # libappindicator has readable resources.
      TMPDIR: $XDG_RUNTIME_DIR

parts:
  electron-quick-start:
    plugin: nil
    source: https://github.com/electron/electron-quick-start.git
    override-build: |
        npm install electron @electron/packager
        npx electron-packager . --overwrite --platform=linux --output=release-build --prune=true
        cp -rv ./electron-quick-start-linux-* $SNAPCRAFT_PART_INSTALL/electron-quick-start
    build-snaps:
    - node/14/stable
    build-packages:
    - unzip
    stage-packages:
    - libnss3
    - libnspr4

如果你想将此示例应用于现有项目：

¥If you want to apply this example to an existing project:

  • 将 source: https://github.com/electron/electron-quick-start.git 替换为 source: .。

    ¥Replace source: https://github.com/electron/electron-quick-start.git with source: ..

  • 将 electron-quick-start 的所有实例替换为你的项目名称。

    ¥Replace all instances of electron-quick-start with your project's name.

步骤 2：构建快照​

¥Step 2: Build the snap

$ snapcraft

<output snipped>
Snapped electron-packager-hello-world_0.1_amd64.snap

步骤 3：安装 snap​

¥Step 3: Install the snap

sudo snap install electron-packager-hello-world_0.1_amd64.snap --dangerous

步骤 4：运行快照​

¥Step 4: Run the snap

electron-packager-hello-world

使用现有的 Debian 软件包​

¥Using an Existing Debian Package

Snapcraft 能够获取现有的 .deb 文件并将其转换为 .snap 文件。快照的创建是使用 snapcraft.yaml 文件进行配置的，该文件描述了源、依赖、描述和其他核心构建块。

¥Snapcraft is capable of taking an existing .deb file and turning it into a .snap file. The creation of a snap is configured using a snapcraft.yaml file that describes the sources, dependencies, description, and other core building blocks.

步骤 1：创建 Debian 软件包​

¥Step 1: Create a Debian Package

如果你还没有 .deb 包，则使用 electron-installer-snap 可能是创建快照包的更简单的路径。然而，存在多种创建 Debian 软件包的解决方案，包括 Electron Forge、electron-builder 或 electron-installer-debian。

¥If you do not already have a .deb package, using electron-installer-snap might be an easier path to create snap packages. However, multiple solutions for creating Debian packages exist, including Electron Forge, electron-builder or electron-installer-debian.

步骤 2：创建 snapcraft.yaml​

¥Step 2: Create a snapcraft.yaml

有关可用配置选项的更多信息，请参阅 关于 snapcraft 语法的文档。让我们看一个例子：

¥For more information on the available configuration options, see the documentation on the snapcraft syntax. Let's look at an example:

name: myApp
version: '2.0.0'
summary: A little description for the app.
description: |
 You know what? This app is amazing! It does all the things
 for you. Some say it keeps you young, maybe even happy.

grade: stable
confinement: classic

parts:
  slack:
    plugin: dump
    source: my-deb.deb
    source-type: deb
    after:
      - desktop-gtk3
    stage-packages:
      - libasound2
      - libnotify4
      - libnspr4
      - libnss3
      - libpcre3
      - libpulse0
      - libxss1
      - libxtst6
  electron-launch:
    plugin: dump
    source: files/
    prepare: |
      chmod +x bin/electron-launch

apps:
  myApp:
    command: bin/electron-launch $SNAP/usr/lib/myApp/myApp
    desktop: usr/share/applications/myApp.desktop
    # Correct the TMPDIR path for Chromium Framework/Electron to ensure
    # libappindicator has readable resources.
    environment:
      TMPDIR: $XDG_RUNTIME_DIR

如你所见，snapcraft.yaml 指示系统启动名为 electron-launch 的文件。在此示例中，它将信息传递到应用的二进制文件：

¥As you can see, the snapcraft.yaml instructs the system to launch a file called electron-launch. In this example, it passes information on to the app's binary:

#!/bin/sh

exec "$@" --executed-from="$(pwd)" --pid=$$ > /dev/null 2>&1 &

或者，如果你正在使用 strict 限制构建 snap，则可以使用 desktop-launch 命令：

¥Alternatively, if you're building your snap with strict confinement, you can use the desktop-launch command:

apps:
  myApp:
    # Correct the TMPDIR path for Chromium Framework/Electron to ensure
    # libappindicator has readable resources.
    command: env TMPDIR=$XDG_RUNTIME_DIR PATH=/usr/local/bin:${PATH} ${SNAP}/bin/desktop-launch $SNAP/myApp/desktop
    desktop: usr/share/applications/desktop.desktop

可选的：启用桌面捕获​

¥Optional: Enabling desktop capture

在某些使用 Wayland 协议的 Linux 配置中，捕获桌面需要 PipeWire 库。要将 PipeWire 与你的应用打包在一起，请确保基本快照设置为 core22 或更高版本。接下来，创建一个名为 pipewire 的部分并将其添加到应用的 after 部分：

¥Capturing the desktop requires PipeWire library in some Linux configurations that use the Wayland protocol. To bundle PipeWire with your application, ensure that the base snap is set to core22 or newer. Next, create a part called pipewire and add it to the after section of your application:

  pipewire:
    plugin: nil
    build-packages: [libpipewire-0.3-dev]
    stage-packages: [pipewire]
    prime:
      - usr/lib/*/pipewire-*
      - usr/lib/*/spa-*
      - usr/lib/*/libpipewire*.so*
      - usr/share/pipewire

最后，为 PipeWire 配置应用的环境：

¥Finally, configure your application's environment for PipeWire:

    environment:
      SPA_PLUGIN_DIR: $SNAP/usr/lib/$CRAFT_ARCH_TRIPLET/spa-0.2
      PIPEWIRE_CONFIG_NAME: $SNAP/usr/share/pipewire/pipewire.conf
      PIPEWIRE_MODULE_DIR: $SNAP/usr/lib/$CRAFT_ARCH_TRIPLET/pipewire-0.3