# 第4章.发行应用
---
要使用 Electron 发布你的应用,包含你应用的文件夹名必须为 `app`,并放在 Electron 的 `resources` 目录下(在 macOS 中,是 `Electron.app/Contents/Resources/`;在 Linux 和 Windows 中,为 `resources/`),就像这样:
**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`;Window上的 `electron.exe`),Electron 就会启动为你的 app。`electron` 目录就是就是你交付给最终用户的发行版。
## 打包应用为一个文件
除了拷贝所有应用的资源文件来分发你的 app,还可以打包为一个 [asar](https://github.com/electron/asar) 档案,以避免暴露你应用源代码给用户。
要使用一个 `asar` 档案来替代 `app` 文件夹,需要重命名档案为 `app.asar`,并像下面那样放到 Electron 的 `resources` 目录,然后 Electron 会尝试读取档案,并从其中启动。
**macOS**
~~~
electron/Electron.app/Contents/Resources/
└── app.asar
~~~
**Windows 和 Linux**
~~~
electron/resources/
└── app.asar
~~~
更多信息可以在【[应用打包](227458)】中查阅。
## 使用下载的二进制再造
当打包你的应用到 Electron 之后,你会希望在分发给用户之前再造 Electron 。
**Windows**
你可以重命名 `electron.exe` 文件为任何你喜欢的名字,并使用如 [rcedit](https://github.com/atom/rcedit) 等工具修改 icon 和其它信息。
**macOS**
可以重命名 `electron.app` 为任何你喜欢的名字,还需要重命名如下文件中的 `CFBundleDisplayName`、`CFBundleIdentifier` 和 `CFBundleName` 字段:
* Electron.app/Contents/Info.plist
* Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist
还可以重命名 `helper app` 来避免 Activity Monitor 中显示 `Electron Helper`。但是,确保你已经重命名了 `helper app` 的可执行文件的名称。
重命名后的 app 的结构应该如下:
~~~
MyApp.app/Contents
├── Info.plist
├── MacOS/
│ └── MyApp
└── Frameworks/
├── MyApp Helper EH.app
| ├── Info.plist
| └── MacOS/
| └── MyApp Helper EH
├── MyApp Helper NP.app
| ├── Info.plist
| └── MacOS/
| └── MyApp Helper NP
└── MyApp Helper.app
├── Info.plist
└── MacOS/
└── MyApp Helper
~~~
**Linux**
可以重命名 `electron` 可执行程序为任何你喜欢的名字。
## 打包工具
除了手动打包你的app,还可以选择使用第三方打包工具来替你完成这个工作:
* [electron-builder](https://github.com/electron-userland/electron-builder)
* [electron-packager](https://github.com/electron-userland/electron-packager)
## 通过从源代码重建 Electron 来再造
还可以通过从源码重建来改变产品名字,以再造 Electron。要这样做,你需要修改 `atom.gyp` 文件,并且进行一个干净的重建。
**grunt-build-atom-shell**
手动检出 Electron 的代码并重建非常复杂,所以一个可以自动处理这个过程的 Grunt 任务被创建:[grunt-build-atom-shell](https://github.com/paulcbetts/grunt-build-atom-shell)。
这个任务会自动处理编辑 `.gyp` 文件,自动从源码重建,然后重建你的应用中的原生 Node 模块来匹配新的可执行文件名称。
**创建一个自定义 Electron 分支**
如果只是为了构建你的 app,甚至对于产品级的应用,你几乎都不用去创建一个 Electron 的自定义分支。使用一个如 `electron-packager` 或者 `electron-builder` 的工具,就可以再造 Electron,而不需要这些步骤。
当你有自定义的直接打补丁到 Electron 的、或者不能被逆流的、或者被从官方版本拒绝的 C++ 代码,才需要分支 Electron。作为 Electron 的维护者,我们非常愿意让你的工作场景运行,所以尽可能努力将你的修改提交到官方 Electron 版本,这对你来说是非常容易的,我们也会感激你的帮助。
**使用 surf-build 来创建一个自定义的发布:**
1. 安装 [surf](https://github.com/surf-build/surf),通过 npm:`npm install -g surf-build@latest`
2. 创建一个新的 S3 bucket,并创建如下空目录结构:
~~~
- atom-shell/
- symbols/
- dist/
~~~
设置如下环境变量:
* `ELECTRON_GITHUB_TOKEN` —— 一个可以在 GitHub 创建发布的令牌
* `ELECTRON_S3_ACCESS_KEY`, `ELECTRON_S3_BUCKET`, `ELECTRON_S3_SECRET_KEY` —— 你将上传 node.js headers 以及 symbols 的位置
* `ELECTRON_RELEASE` —— 设置为 `true` 然后上传部分将会运行, leave unset and surf-build will just do CI-type checks, appropriate to run for every pull request
* `CI` —— 设置为 `true` 否则它会失败
* `GITHUB_TOKEN` —— 设置它跟 `ELECTRON_GITHUB_TOKEN` 一样
* `SURF_TEMP` —— 在 Windows 上设置为 C:\Temp 来阻止过长路径的问题
* `TARGET_ARCH` —— 设置为 `ia32` 或 `x64`
1. 在 `script/upload.py` 中,必须设置 `ELECTRON_REPO` 到你的分支(MYORG/electron),特别是如果你本身就是 Electron 的贡献者时
2. `surf-build -r https://github.com/MYORG/electron -s YOUR_COMMIT -n 'surf-PLATFORM-ARCH'`
3. 等待漫长的时间之后,构建完成
- 索引
- 前言.关于Electron
- 第一部分 开发指南
- 第1章.平台支持
- 第2章.安全、原生功能和你的责任
- 第3章.版本说明
- 第4章.发行应用
- 第5章.Mac App商店提交指南
- 第6章.Windows商店指南
- 第7章.应用打包
- 第8章.使用Node原生模块
- 第9章.调试主进程
- 9.1.在VSCode中调试
- 9.2.在node-inspector中调试
- 第10章.使用Selenium和WebDriver
- 第11章.DevTools扩展
- 第12章.使用Pepper Flash插件
- 第13章.使用Widevine CDM插件
- 第14章.通过自动化持续集成系统进行测试
- 第15章.离屏渲染
- 第二部分 使用教程
- 第16章.快速入门
- 第17章.桌面环境集成
- 第18章.在线/离线事件探测
- 第19章.应答式编译器(REPL)
- 第三部分 API参考
- 第20章.API简介
- 第21章.进程对象
- 第22章.Chrome的命令行开关
- 第23章.环境变量
- 第24章.定制的DOM元素
- 24.1.File 对象
- 24.2.webview 标签
- 第25章.主进程模块
- 25.1.app
- 25.2.BrowserWindow
- 25.3.无框架窗口
- 第26章.渲染进程模块
- 第27章.两种进程可用的模块
- 第四部分 高级主题
- 附 FAQ
- 附 文档规范
- 附 示例用例
- 1.无边框窗口