Electron

由于Electron的性质,与其他应用相比,将Electron应用构建为Flatpak应用需要一些额外的步骤。值得庆幸的是,有几种工具和资源可以使这些步骤更容易。

本教程提供有关如何构建Electron应用程序与其他应用程序不同的信息。 它还包括有关构建Electron应用程序的工具以及如何使用它的信息。

该指南介绍了 清单文件 ,来自 示例Electron Flatpak应用程序 。在开始之前,最好先在线查看或下载该应用程序。

构建示例应用程序

虽然并非绝对必要,但最好自己尝试构建和运行示例应用程序。

要获取构建的设置,请从GitHub下载或克隆示例应用程序,然后导航到终端中的 /flatpak 目录。 您还必须安装Electron基础应用程序:

$ flatpak install flathub io.atom.electron.BaseApp//stable

然后运行构建命令:

$ flatpak-builder build org.flathub.electron-sample-app.json --install

最后,运行应用:

$ flatpak run org.flatpak.electron-sample-app

基本配置

示例应用清单文件的第一部分指定了应用ID、runtime和SDK:

"app-id": "org.flathub.electron-sample-app",
"runtime": "org.freedesktop.Platform",
"runtime-version": "1.6",
"branch": "stable",
"sdk": "org.freedesktop.Sdk",

Freedesktop运行时通常是与Electron应用程序一起使用的最佳运行时,因为它是最小的运行时,其他依赖项将特定于Electron本身。

Electron base应用

然后,清单文件通过 basebase-version 属性指明了Electron要使用的的base app:

"base": "io.atom.electron.BaseApp",
"base-version": "stable",

base app在 building-basics 有介绍。使用Electron的base app比手动构建Electron和它的依赖要方便和快速得多。也有在用户的机器上减少大量副本文件的优点,因为这意味着Electron在磁盘上只保存一份。

注意这个项目的base app是使用的Electron1.x.x,是写这个项目时最通用的版本。Electron2.x.x的应用应该用 org.electronjs.Electron2.Baseapp 代替。

命令

这个 command 表明执行一个名为 run.sh 的脚本用来运行这个应用。这会在后续详细介绍。

"command": "run.sh",

沙箱权限

标准的指南可以用于Electron应用。可是Electron还不支持Wayland,所以只能使用X11进行显示。示例的应用也为声音配置了pulseaudio和开启了网络的访问:

"finish-args": [
    "--share=ipc",
    "--socket=x11",
    "--socket=pulseaudio",
    "--share=network"
],

构建选项

构建选项不是必要的,但是在发生一些错误的时候很有用。 env 允许设置一个环境变量数组,这时将 NPM_CONFIG_LOGLEVEL 设置为 info 可以让 npm 给我们更多关于错误的详情。

"build-options" : {
    "cflags": "-O2 -g",
    "cxxflags": "-O2 -g",
    "env": {
        "NPM_CONFIG_LOGLEVEL": "info"
    }
},

构建Node.js

清单文件的下一部分是模块列表。Electron base app不包含Node.js,所以有必要将Node.js作为一个模块进行构建。教程构建了Node.js 8.11.1,在写这个教程的时候这个版本可以在大多数项目上正常工作,但是请确保使用在你的项目工作得最好的版本。

{
    "name": "nodejs",
    "cleanup": [
        "/include",
        "/share",
        "/app/lib/node_modules/npm/changelogs",
        "/app/lib/node_modules/npm/doc",
        "/app/lib/node_modules/npm/html",
        "/app/lib/node_modules/npm/man",
        "/app/lib/node_modules/npm/scripts"
    ],
    "sources": [
        {
            "type": "archive",
            "url": "https://nodejs.org/dist/v8.11.1/node-v8.11.1.tar.xz",
            "sha256": "40a6eb51ea37fafcf0cfb58786b15b99152bec672cccf861c14d1cca0ad4758a"
        }
    ]
}

清理步骤也不是必要的。但是,移除文档可以帮助我们减少绑定所占用的空间。

应用模块

清单文件的最后一部分是定义应用模块如何构建。可以找到一些Electron和Node.js的一些附加逻辑。

"name": "electron-sample-app",
"build-options" : {
    "env": {
        "electron_config_cache": "/run/build/electron-sample-app/npm-cache"
    }
},

flatpak-builder 默认不能访问网络。这意味着依赖于下载资源的工具无法工作。因此,Node.js包必须在构建之前提前下载好。设置环境变量 electron_config_cache 表明这些包会在构建的时候被找到。

清单文件的下一部分描述了怎样构建应用。使用了简单构建系统的选项,允许指定一系列命令来构建。下载地址和应用的hash也会进行指定。

"buildsystem": "simple",
"sources": [
  {
      "type": "archive",
      "url": "https://github.com/flathub/electron-sample-app/archive/1.0.1.tar.gz",
      "sha256": "a2feb3f1cf002a2e4e8900f718cc5c54db4ad174e48bfcfbddcd588c7b716d5b",
      "dest": "main"
  },

绑定NPM包

下一行是NPM模块如何作为flatpak的一部分进行绑定:

"generated-sources.json",

Since even simple Node.js applications depend on dozens of packages, it would be impractical to specify all of them as part of a manifest file. A Python script has therefore been developed to download Node.js packages with NPM and include them in an application’s sources.

这个Python NPM脚本需要一个 package-lock.json 文件。它包含了应用依赖包的信息,可以在应用根目录运行 npm install --package-lock-only 生成(示例包含了一个 package-lock.json 供参考)。下面运行这个脚本:

$ python3 flatpak-npm-generator.py package-lock.json

这生成了为应用构建NPM包的JSON清单(译者注:区别于应用的清单文件),输出一个名为 generated-sources.json 的文件。这个文件的内容可以拷贝到应用的清单文件中,但是因为通常它非常长,最好是从主要的清单链接它。如上所示,可以在清单文件中添加一行 generated-source.json 来实现链接。

启动应用

Electron应用通过一个简单的脚本文件运行。可以用任何名字,但是必须在清单文件中 “command": 属性指明。

/* Wrapper to launch the app */
{
  "type": "script",
  "dest-filename": "run.sh",
  "commands": [ "npm start --prefix=/app/main" ]
}

构建命令

最后但不是不重要,因为使用了简单构建选项,必须要提供一个构建命令列表。可以看到,npm--offline 选项运行,使用的包已经缓存好了。这些被拷贝到了 /app/main/ 。最后 run.sh 脚本安装到了 /app/bin/ ,所以最后它会在 $PATH

"build-commands": [
    /* Install npm dependencies */
    "npm install --prefix=main --offline --cache=/run/build/electron-sample-app/npm-cache/",
    /* Bundle app and dependencies */
    "mkdir -p /app/main /app/bin",
    "cp -ra main/* /app/main/",
    /* Install app wrapper */
    "install run.sh /app/bin/"
]