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应用¶
然后,清单文件通过 base
和 base-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
代替。
沙箱权限¶
标准的指南可以用于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/"
]