当前位置: 首页 > 文档资料 > Electron 中文文档 >

应用部署

优质
小牛编辑
125浏览
2023-12-01

为了使用 Electron 部署你的应用,您需要进行打包和重塑。这样做的最简单的方法是使用以下第三方打包工具之一:

  • electron-forge
  • electron-builder
  • electron-packager

这些工具将覆盖发布一个Electron应用所需采取的所有步骤,例如,打包应用程序,重组可执行程序,设置图标和可配置的创建安装程序。

Application Distribution

To distribute your app with Electron, you need to package and rebrand it. The easiest way to do this is to use one of the following third party packaging tools:

  • electron-forge
  • electron-builder
  • electron-packager

These tools will take care of all the steps you need to take to end up with a distributable Electron applications, such as packaging your application, rebranding the executable, setting the right icons and optionally creating installers.

手动发布

您也可以选择手动发布你的app。只需执行下面的步骤

为了使用 Electron 部署你的应用程序,你需要下载 Electron 的 prebuilt binaries。 接下来,你存放应用程序的文件夹需要叫做 app 并且需要放在 Electron 的 资源文件夹Resources下,如下面的示例所示。 请注意,在下面的示例中,Electron的预制二进制文件的位置用electron/表示。

在 macOS 中:

electron/Electron.app/Contents/Resources/app/
├── package.json
├── main.js
└── index.html

在 Windows 和 Linux 中:

electron/resources/app
├── package.json
├── main.js
└── index.html

然后运行 Electron.app (或者 Linux 中的 electron,Windows 中的 electron.exe), 接着 Electron 就会以你的应用程序的方式启动。electron 文件夹将被部署并可以分发给最终的使用者。

Manual distribution

You can also choose to manually get your app ready for distribution. The steps needed to do this are outlined below.

To distribute your app with Electron, you need to download Electron's prebuilt binaries. Next, the folder containing your app should be named app and placed in Electron's resources directory as shown in the following examples. Note that the location of Electron's prebuilt binaries is indicated with electron/ in the examples below.

On macOS:

electron/Electron.app/Contents/Resources/app/
├── package.json
├── main.js
└── index.html

On Windows and Linux:

electron/resources/app
├── package.json
├── main.js
└── index.html

Then execute Electron.app (or electron on Linux, electron.exe on Windows), and Electron will start as your app. The electron directory will then be your distribution to deliver to final users.

将你的应用程序打包成一个文件

除了通过拷贝所有的资源文件来分发你的应用程序之外,你可以通过打包你的应用程序为一个 asar 档案文件以避免暴露你的源代码。

为了使用一个 asar 档案文件代替 app 文件夹,你需要修改这个档案文件的名字为 app.asar , 然后将其放到 Electron 的资源文件夹下,然后 Electron 就会试图读取这个档案文件并从中启动。 如下所示:

在 macOS 中:

electron/Electron.app/Contents/Resources/
└── app.asar

在 Windows 和 Linux 中:

electron/resources/
└── app.asar

更多的细节参阅 Application packaging.

Packaging Your App into a File

Apart from shipping your app by copying all of its source files, you can also package your app into an asar archive to avoid exposing your app's source code to users.

To use an asar archive to replace the app folder, you need to rename the archive to app.asar, and put it under Electron's resources directory like below, and Electron will then try to read the archive and start from it.

On macOS:

electron/Electron.app/Contents/Resources/
└── app.asar

On Windows and Linux:

electron/resources/
└── app.asar

More details can be found in Application packaging.

使用下载好的二进制文件进行重新定制

将您的应用程序捆绑到Electron后,您可能需要在把应用分发给用户前将Electron进行重新定制

Rebranding with Downloaded Binaries

After bundling your app into Electron, you will want to rebrand Electron before distributing it to users.

Windows

你可以将 electron.exe 重命名为任何你喜欢的名字,然后可以使用像 rcedit 那样的工具编辑它的 icon 和其他信息。

Windows

You can rename electron.exe to any name you like, and edit its icon and other information with tools like rcedit.

macOS

你可以将 Electron.app 重命名为任意你喜欢的名字,然后你也需要将一些文件中的 CFBundleDisplayNameCFBundleIdentifier 以及 CFBundleName 字段一并修改掉。 这些文件如下:

  • Electron.app/Contents/Info.plist
  • Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist

你也可以重命名帮助程序以避免它在系统活动监视器中显示为Electron Helper, 但是请确保你已经修改了帮助应用的可执行文件的名字。

一个重命名后的应用程序的结构可能是这样的

MyApp.app/Contents
├── Info.plist
├── MacOS/
│   └── MyApp
└── Frameworks/
    └── MyApp Helper.app  ├── Info.plist  └── MacOS/      └── MyApp Helper

macOS

You can rename Electron.app to any name you want, and you also have to rename the CFBundleDisplayName, CFBundleIdentifier and CFBundleName fields in the following files:

  • Electron.app/Contents/Info.plist
  • Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist

You can also rename the helper app to avoid showing Electron Helper in the Activity Monitor, but make sure you have renamed the helper app's executable file's name.

The structure of a renamed app would be like:

MyApp.app/Contents
├── Info.plist
├── MacOS/
│   └── MyApp
└── Frameworks/
    └── MyApp Helper.app  ├── Info.plist  └── MacOS/      └── MyApp Helper

Linux

你可以将 electron 重命名为任意你喜欢的名字。

Linux

You can rename the electron executable to any name you like.

通过重编译源代码来进行重新定制

你也可以通过改变产品名称后从源码构建来重塑Electron的形象。 你只需要在 args.gn 文件中将构建参数设置为对应产品的名称(electron_product_name = "YourProductName"),并进行重新构建。

Rebranding by Rebuilding Electron from Source

It is also possible to rebrand Electron by changing the product name and building it from source. To do this you need to set the build argument corresponding to the product name (electron_product_name = "YourProductName") in the args.gn file and rebuild.

创建一个自定义 Electron 分支

如果只是为了构建你的 app,你不需要创建一个自定义的 Electron 分支, 即使是“生产级”的应用程序。 可以使用工具,如 electron-packagerelectron-builder 来 “重新定制” 你的 Electron app。

如果你有个人定制的C++代码必须打补丁到Electron,而这些代码不能提交给上游或者已被官方版本拒绝,你就需要fork 你自己的Electron。 作为Electron的维护者,我们非常希望你的使用场景能够工作,所以请尽最大的努力让你的修改进入 Electron 的官方版本,这对你来说会更加方便并且我们衷心感谢你的帮助。

Creating a Custom Electron Fork

Creating a custom fork of Electron is almost certainly not something you will need to do in order to build your app, even for "Production Level" applications. Using a tool such as electron-packager or electron-forge will allow you to "Rebrand" Electron without having to do these steps.

You need to fork Electron when you have custom C++ code that you have patched directly into Electron, that either cannot be upstreamed, or has been rejected from the official version. As maintainers of Electron, we very much would like to make your scenario work, so please try as hard as you can to get your changes into the official version of Electron, it will be much much easier on you, and we appreciate your help.

通过 surf-build 创建一个自定义版本

  1. 通过 npm 安装 Surf: npm install -g surf-build@latest

  2. 创建一个新的 S3 bucket 并按照以下结构创建文件夹:

    - electron/
      - symbols/
      - dist/
  3. 设置以下环境变量:

  • ELECTRON_GITHUB_TOKEN - 一个在 GitHub 创建版本的 token
  • ELECTRON_S3_ACCESS_KEY, ELECTRON_S3_BUCKET, ELECTRON_S3_SECRET_KEY - 你将要上传的 Node.js 的 headers 以及 symbols 的位置
  • ELECTRON_RELEASE - 设置为 true,上传部分将运行,不设置 和 surf-build 只是做 CI-type 的检查,它只在每次发起拉取请求时运行。
  • CI - 设置为 true ,否则无效
  • GITHUB_TOKEN - 设置为与 ELECTRON_GITHUB_TOKEN 相同
  • SURF_TEMP - 在 Windows 下设置为 C:Temp 来防止路径太长的问题
  • TARGET_ARCH - 设置为 ia32x64
  1. script/upload.py,你 必须 为你的分支(MYORG/electron)设置 ELECTRON_REPO, 尤其如果你本身是一个 Electron 贡献者。

  2. surf-build -r https://github.com/MYORG/electron -s YOUR_COMMIT -n 'surf-PLATFORM-ARCH'

  3. 需要很长的时间来等待构建完成

Creating a Custom Release with surf-build

  1. Install Surf, via npm: npm install -g surf-build@latest

  2. Create a new S3 bucket and create the following empty directory structure:

    - electron/
      - symbols/
      - dist/
  3. Set the following Environment Variables:

  • ELECTRON_GITHUB_TOKEN - a token that can create releases on GitHub
  • ELECTRON_S3_ACCESS_KEY, ELECTRON_S3_BUCKET, ELECTRON_S3_SECRET_KEY - the place where you'll upload Node.js headers as well as symbols
  • ELECTRON_RELEASE - Set to true and the upload part will run, leave unset and surf-build will do CI-type checks, appropriate to run for every pull request.
  • CI - Set to true or else it will fail
  • GITHUB_TOKEN - set it to the same as ELECTRON_GITHUB_TOKEN
  • SURF_TEMP - set to C:Temp on Windows to prevent path too long issues
  • TARGET_ARCH - set to ia32 or x64
  1. In script/upload.py, you must set ELECTRON_REPO to your fork (MYORG/electron), especially if you are a contributor to Electron proper.

  2. surf-build -r https://github.com/MYORG/electron -s YOUR_COMMIT -n 'surf-PLATFORM-ARCH'

  3. Wait a very, very long time for the build to complete.