Electron 應(yīng)用程序打包

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

專用工具

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

手動打包?

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

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

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

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

NOTE

Electron預(yù)構(gòu)建的二進制文件的位置 在下面的示例中用 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)用啟動。 然后， electron 目錄將作為您的分發(fā)產(chǎn)品交付給用戶。

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

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

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

• macOS

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

• Windows

electron/resources/
└── app.asar

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

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

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

• Windows: 您可以將electon.exe重命名為您喜歡的任何名稱，也可以通過rcedit編輯其圖標和其他信息。

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

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

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

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

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

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

NOTE

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

請記住，我們不建議這樣做，因為配置環(huán)境以從源代碼編譯 并非易事，并且需要花費大量時間。