应用部署
为了使用 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
重命名为任意你喜欢的名字,然后你也需要将一些文件中的 CFBundleDisplayName
, CFBundleIdentifier
以及 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-packager
或 electron-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 创建一个自定义版本
通过 npm 安装 Surf:
npm install -g surf-build@latest
创建一个新的 S3 bucket 并按照以下结构创建文件夹:
- electron/ - symbols/ - dist/
设置以下环境变量:
ELECTRON_GITHUB_TOKEN
- 一个在 GitHub 创建版本的 tokenELECTRON_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
- 设置为ia32
或x64
在
script/upload.py
,你 必须 为你的分支(MYORG/electron
)设置ELECTRON_REPO
, 尤其如果你本身是一个 Electron 贡献者。surf-build -r https://github.com/MYORG/electron -s YOUR_COMMIT -n 'surf-PLATFORM-ARCH'
需要很长的时间来等待构建完成
Creating a Custom Release with surf-build
Install Surf, via npm:
npm install -g surf-build@latest
Create a new S3 bucket and create the following empty directory structure:
- electron/ - symbols/ - dist/
Set the following Environment Variables:
ELECTRON_GITHUB_TOKEN
- a token that can create releases on GitHubELECTRON_S3_ACCESS_KEY
,ELECTRON_S3_BUCKET
,ELECTRON_S3_SECRET_KEY
- the place where you'll upload Node.js headers as well as symbolsELECTRON_RELEASE
- Set totrue
and the upload part will run, leave unset andsurf-build
will do CI-type checks, appropriate to run for every pull request.CI
- Set totrue
or else it will failGITHUB_TOKEN
- set it to the same asELECTRON_GITHUB_TOKEN
SURF_TEMP
- set toC:Temp
on Windows to prevent path too long issuesTARGET_ARCH
- set toia32
orx64
In
script/upload.py
, you must setELECTRON_REPO
to your fork (MYORG/electron
), especially if you are a contributor to Electron proper.surf-build -r https://github.com/MYORG/electron -s YOUR_COMMIT -n 'surf-PLATFORM-ARCH'
Wait a very, very long time for the build to complete.