跳至主要內容

Snapcraft 指南 (Linux)

本指南提供如何為任何 Snapcraft 環境 (包括 Ubuntu 軟體中心) 封裝您的 Electron 應用程式的資訊。

背景和需求​

Canonical 與更廣泛的 Linux 社群一起，旨在透過 snapcraft 專案解決許多常見的軟體安裝問題。Snaps 是容器化的軟體套件，其中包含所需的依賴項、自動更新，並可在所有主要的 Linux 發行版上運作，而無需修改系統。

有三種方法可以建立 .snap 檔案

  1. 使用 Electron Forge 或 electron-builder，這兩種工具都開箱即用，支援 snap。這是最簡單的選項。
  2. 使用 electron-installer-snap，它會採用 @electron/packager 的輸出。
  3. 使用已建立的 .deb 套件。

在某些情況下，您需要安裝 snapcraft 工具。有關安裝適用於您的特定發行版的 snapcraft 的說明，請參閱此處。

使用 electron-installer-snap​

該模組的工作方式類似於 electron-winstaller 和類似的模組，其範圍僅限於建置 snap 套件。您可以使用以下命令安裝它

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

步驟 1：封裝您的 Electron 應用程式​

使用 @electron/packager (或類似工具) 封裝應用程式。請務必移除最終應用程式中不需要的 node_modules，因為任何您實際上不需要的模組都會增加應用程式的大小。

輸出應該大致如下所示

.
└── 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​

從其 PATH 中具有 snapcraft 的終端機，執行 electron-installer-snap，其中唯一需要的參數是 --src，這是您在第一步中建立的已封裝 Electron 應用程式的位置。

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

如果您有現有的建置管道，則可以透過程式設計方式使用 electron-installer-snap。如需更多資訊，請參閱 Snapcraft API 文件。

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

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

將 snapcraft 與 @electron/packager 搭配使用​

步驟 1：建立範例 Snapcraft 專案​

建立您的專案目錄，並將以下內容新增至 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

如果您想將此範例應用於現有專案

  • 將 source: https://github.com/electron/electron-quick-start.git 替換為 source: .。
  • 將所有 electron-quick-start 的實例替換為您的專案名稱。

步驟 2：建置 snap​

$ snapcraft

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

步驟 3：安裝 snap​

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

步驟 4：執行 snap​

electron-packager-hello-world

使用現有的 Debian 套件​

Snapcraft 能夠採用現有的 .deb 檔案並將其轉換為 .snap 檔案。使用 snapcraft.yaml 檔案設定 snap 的建立，該檔案描述來源、依賴項、描述和其他核心建置區塊。

步驟 1：建立 Debian 套件​

如果您還沒有 .deb 套件，則使用 electron-installer-snap 可能是建立 snap 套件的更簡單方法。但是，有多種建立 Debian 套件的解決方案，包括 Electron Forge、electron-builder 或 electron-installer-debian。

步驟 2：建立 snapcraft.yaml​

如需有關可用設定選項的詳細資訊，請參閱有關 snapcraft 語法的說明文件。讓我們看一個範例

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 的檔案。在此範例中，它將資訊傳遞到應用程式的二進位檔

#!/bin/sh

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

或者，如果您使用 strict 限制來建置 snap，則可以使用 desktop-launch 命令

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

選用：啟用桌面擷取​

擷取桌面需要在某些使用 Wayland 通訊協定的 Linux 設定中安裝 PipeWire 程式庫。若要將 PipeWire 與您的應用程式捆綁在一起，請確保基本 snap 設定為 core22 或更新版本。接下來，建立一個名為 pipewire 的部分，並將其新增至應用程式的 after 區段

  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

    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