要使用 Electron 分發(fā)你的應(yīng)用，需要打包并重命名它。 為此，您既可使用專(zhuān)用工具，也可以手動(dòng)操作。

專(zhuān)用工具

有幾種工具可以打包和分發(fā)您的Electron應(yīng)用程序。 我們建議使用 Electron Forge。 

手動(dòng)打包?

如果您更喜歡手動(dòng)操作，有兩種方法可以分發(fā)應(yīng)用程序：

• 使用預(yù)構(gòu)建可執(zhí)行文件
• 應(yīng)用程序源代碼存檔

使用預(yù)構(gòu)建可執(zhí)行文件

為了使用 Electron 部署你的應(yīng)用程序，你需要下載 Electron 的 prebuilt binaries。 接下來(lái)，你存放應(yīng)用程序的文件夾需要叫做 app 并且需要放在 Electron 的 資源文件夾Resources下，如下面的示例所示。

NOTE

Electron預(yù)構(gòu)建的二進(jìn)制文件的位置 在下面的示例中用 electron/ 表示。

• macOS

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

• Windows and Linux

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

然后在 macOS上執(zhí)行 Electron.app ，在 Linux 上執(zhí)行 electron 或 在 Windows上執(zhí)行electron.exe, 隨后 Electron 將作為你的應(yīng)用啟動(dòng)。 然后， electron 目錄將作為您的分發(fā)產(chǎn)品交付給用戶(hù)。

打包應(yīng)用源碼 (asar)?

如果你沒(méi)有使用 Parcel 或 Webpack 之類(lèi)的構(gòu)建工具，為了減輕拷貝源文件的分發(fā)壓力，你可以把你的 app 打包成一個(gè) asar 包來(lái)提升在 Windows 等平臺(tái)上讀取文件的性能。

為了使用一個(gè) asar 檔案文件代替 app 文件夾，你需要修改這個(gè)檔案文件的名字為 app.asar ， 然后將其放到 Electron 的資源文件夾下，然后 Electron 就會(huì)試圖讀取這個(gè)檔案文件并從中啟動(dòng)。 如下所示：

• macOS

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

• Windows

electron/resources/
└── app.asar

你可以在 electron/asar 存儲(chǔ)庫(kù) 中找到有關(guān)如何使用 asar 的更多詳細(xì)信息。

使用下載好的可執(zhí)行文件進(jìn)行重新定制?

將您的應(yīng)用程序捆綁到Electron后，您可能需要在把應(yīng)用分發(fā)給用戶(hù)前將Electron進(jìn)行重新定制

• Windows: 您可以將electon.exe重命名為您喜歡的任何名稱(chēng)，也可以通過(guò)rcedit編輯其圖標(biāo)和其他信息。

• Linux： 您可以將 electron 可執(zhí)行文件重命名為您喜歡的任何名稱(chēng)。

• macOS： 您可以將 Electron.app 重命名為所需的任何名稱(chēng)，并且還必須 以下 文件中的 CFBundleDisplayName， CFBundleIdentifier 和 CFBundleName 字段重命名：

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

  你也可以重命名幫助程序以避免它在系統(tǒng)活動(dòng)監(jiān)視器中顯示為Electron Helper， 但是請(qǐng)確保你已經(jīng)修改了幫助應(yīng)用的可執(zhí)行文件的名字。

  一個(gè)重命名后的應(yīng)用程序的結(jié)構(gòu)可能是這樣的

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

NOTE

你也可以通過(guò)改變產(chǎn)品名稱(chēng)后從源碼構(gòu)建來(lái)重塑Electron的形象。 你只需要在 args.gn 文件中將構(gòu)建參數(shù)設(shè)置為對(duì)應(yīng)產(chǎn)品的名稱(chēng)(electron_product_name = "YourProductName")，并進(jìn)行重新構(gòu)建。

請(qǐng)記住，我們不建議這樣做，因?yàn)榕渲铆h(huán)境以從源代碼編譯 并非易事，并且需要花費(fèi)大量時(shí)間。