本指南提供了有關(guān)如何包裝你的 Electron 應(yīng)用程序的任何 Snapcraft 環(huán)境, 包括 Ubuntu 軟件中心的信息。

背景和要求

與更廣泛的 Linux 社區(qū)一起, 規(guī)范旨在解決 snapcraft 項(xiàng)目中的許多常見(jiàn)的軟件安裝問(wèn)題。 Snaps 是容器化的軟件包, 包括所需的依賴項(xiàng)、自動(dòng)更新和對(duì)所有主要 Linux 發(fā)行版的工作, 而無(wú)需進(jìn)行系統(tǒng)修改。

創(chuàng)建 .snap 文件有三種方法:

1) 使用 Electron Forge 或 electron-builder，這兩種工具都提供開(kāi)箱即用的 snap 支持。 這是最簡(jiǎn)單的選擇。 

2) 使用 electron-installer-snap, 它采用 electron-packager 的輸出。 

3) 使用已經(jīng)創(chuàng)建的 .deb 包。

在某些情況下，您需要安裝 snapcraft 工具。 安裝特定發(fā)行版的 snapcraft 的指南在這里能看到。

使用 electron-installer-snap

該模塊的工作方式類(lèi)似于 electron-winstaller 和類(lèi)似模塊，因?yàn)樗姆秶鷥H限于構(gòu)建 snap 包。你可以這樣安裝:

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

步驟 1: 打包你的 Electron 應(yīng)用程序

使用 electron-packager（或類(lèi)似工具）打包應(yīng)用程序。確保刪除最終應(yīng)用程序中不需要的 ?node_modules?，因?yàn)閷?shí)際上不需要的任何模塊都會(huì)增加應(yīng)用程序的大小。

結(jié)構(gòu)輸出應(yīng)該看起來(lái)大致像這樣:

.
└── 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: 運(yùn)行 electron-installer-snap

從在其 PATH 中包含 snapcraft 的終端，運(yùn)行帶有唯一必需參數(shù) ?--src? 的 ?electron-installer-snap?，這是第一步中創(chuàng)建的打包 Electron 應(yīng)用程序的位置。

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

如果您有現(xiàn)有的構(gòu)建管道，則可以以編程方式使用 electron-installer-snap。有關(guān)詳細(xì)信息，請(qǐng)參閱 Snapcraft API 文檔。

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

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

在electron-packager中使用sapcraft

第 1 步：創(chuàng)建示例 Snapcraft 項(xiàng)目

創(chuàng)建你的項(xiàng)目目錄并將以下內(nèi)容添加到 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: core18
confinement: strict
grade: stable

apps:
  electron-packager-hello-world:
    command: electron-quick-start/electron-quick-start --no-sandbox
    extensions: [gnome-3-34]
    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

如果要將此示例應(yīng)用于現(xiàn)有項(xiàng)目：

• 替代 source: https://github.com/electron/electron-quick-start.git</0 > 為 <code>source: ...
• 替代所有的 electron-quick-start 為你的項(xiàng)目名稱(chēng)。

第 2 步：構(gòu)建 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 步：運(yùn)行 snap

electron-packager-hello-world

使用一個(gè)現(xiàn)有的 Debian 包

Snapcraft 能夠獲取現(xiàn)有的 .deb 文件并將其轉(zhuǎn)換為 .snap 文件?？煺盏膭?chuàng)建是使用描述源、依賴項(xiàng)、描述和其他核心構(gòu)建塊的 snapcraft.yaml 文件配置的。

步驟 1: 創(chuàng)建一個(gè) Debian 包

如果您還沒(méi)有 .deb 包，使用 electron-installer-snap 可能是創(chuàng)建 snap 包的更簡(jiǎn)單途徑。然而，存在多種創(chuàng)建 Debian 軟件包的解決方案，包括 Electron Forge、electron-builder 或 electron-installer-debian。

步驟 2: 創(chuàng)建一個(gè) snapcraft.yaml

有關(guān)可用配置選項(xiàng)的更多信息，請(qǐng)參閱有關(guān) snapcraft 語(yǔ)法的文檔。讓我們看一個(gè)例子：

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

如您所見(jiàn)，snapcraft.yaml 指示系統(tǒng)啟動(dòng)一個(gè)名為 electron-launch 的文件。在此示例中，它將信息傳遞給應(yīng)用程序的二進(jìn)制文件：

#!/bin/sh

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

或者，如果您在嚴(yán)格限制的情況下構(gòu)建 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