閱讀(1.3k) 書簽贊(0) 我要糾錯(cuò)

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

2023-02-16 17:14 更新

學(xué)習(xí)目標(biāo)?

在本教程的這一部分中，我們將介紹使用 Electron Forge 打包和分發(fā)應(yīng)用的基礎(chǔ)知識。

使用 Electron Forge

Electron 的核心模塊中沒有捆綁任何用于打包或分發(fā)文件的工具。如果您在開發(fā)模式下完成了一個(gè) Electron 應(yīng)用，需要使用額外的工具來打包應(yīng)用程序 (也稱為可分發(fā)文件) 并分發(fā)給用戶。可分發(fā)文件可以是安裝程序 (例如 Windows 上的 MSI) 或者綠色軟件 (例如 macOS 上的 .app 文件)。

Electron Forge 是一個(gè)處理 Electron 應(yīng)用程序打包與分發(fā)的一體化工具。在工具底層，它將許多現(xiàn)有的 Electron 工具 (例如 electron-packager、 @electron/osx-sign、 electron-winstaller 等) 組合到一起，因此您不必費(fèi)心處理不同系統(tǒng)的打包工作。

導(dǎo)入你的項(xiàng)目到 Forge

將 Electron Forge 的 CLI 工具包安裝到項(xiàng)目的 devDependencies 依賴中，然后使用現(xiàn)成的轉(zhuǎn)化腳本將項(xiàng)目導(dǎo)入至 Electron Forge。

npm	Yarn
`npm install --save-dev @electron-forge/cli npx electron-forge import`	`yarn add --dev @electron-forge/cli npx electron-forge import`

轉(zhuǎn)換腳本完成后，F(xiàn)orge 會(huì)將一些腳本添加到您的 package.json 文件中。

  //...
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  //...

CLI 文檔

有關(guān) make 或其他 Forge API 的更多信息，請查看 Electron Forge CLI 文檔。

您還應(yīng)該注意到您的 package.json 現(xiàn)在安裝了更多的包在 devDependencies 下，以及一個(gè)導(dǎo)出配置的新 forge.config.js 文件目的。您應(yīng)該在預(yù)填充的配置中看到多個(gè)makers（生成可分發(fā)應(yīng)用程序包的包），每個(gè)目標(biāo)平臺一個(gè)。

創(chuàng)建一個(gè)可分發(fā)版本

要?jiǎng)?chuàng)建可分發(fā)文件，請使用項(xiàng)目中的 make 腳本，該腳本最終運(yùn)行了 electron-forge make 命令。

npm	Yarn
`npm run make`	`yarn run make`

該 make 命令包含兩步：

它將首先運(yùn)行 electron-forge package ，把您的應(yīng)用程序代碼與 Electron 二進(jìn)制包結(jié)合起來。完成打包的代碼將會(huì)被生成到一個(gè)特定的文件夾中。
然后它將使用這個(gè)文件夾為每個(gè) maker 配置生成一個(gè)可分發(fā)文件。

在腳本運(yùn)行后，您應(yīng)該看到一個(gè) out 文件夾，其中包括可分發(fā)文件與一個(gè)包含其源碼的文件夾。

out/
├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
├── ...
└── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app

out/make 文件夾中的應(yīng)用程序應(yīng)該可以啟動(dòng)了！現(xiàn)在，您已經(jīng)創(chuàng)建了你的第一個(gè) Electron 程序。

可分發(fā)文件格式

Electron Forge 通過配置可以為不同的操作系統(tǒng)創(chuàng)建特定格式的可分發(fā)文件 (例如 DMG、deb、MSI 等)。相關(guān)配置選項(xiàng)詳情，請參閱 Forge 的 Makers 文檔。

創(chuàng)建和添加應(yīng)用程序圖標(biāo)

設(shè)置自定義的應(yīng)用程序圖標(biāo)，需要添加一些額外的配置。查看 Forge 的圖標(biāo)教程了解更多信息。

不使用 ELECTRON FORGE 打包

如果您想手動(dòng)打包代碼，或者是想了解 Electron 的打包機(jī)制，可以查看完整的 應(yīng)用程序打包 文檔。

重要提示：對代碼進(jìn)行簽名

將桌面應(yīng)用程序分發(fā)給終端用戶前，我們 強(qiáng)烈推薦 您對 Electron 應(yīng)用進(jìn)行 代碼簽名。代碼簽名是交付桌面應(yīng)用程序的重要組成部分，并且它對于應(yīng)用程序的自動(dòng)更新功能 (將會(huì)在教程最后部分講解) 來說是必需的。

代碼簽名是一種可用于證明桌面應(yīng)用程序是由已知來源創(chuàng)建的安全技術(shù)。 Windows 和 macOS 擁有其特定的代碼簽名系統(tǒng)，這將使用戶難以下載或啟動(dòng)未簽名的應(yīng)用程序。

在 macOS 上，代碼簽名是在應(yīng)用程序打包時(shí)完成的。而在 Windows 中，則是對可分發(fā)文件進(jìn)行簽名操作。如果您已經(jīng)擁有適用于 Windows 和 macOS 的代碼簽名證書，可以在 Forge 配置中設(shè)置您的憑據(jù)。

INFO

欲了解更多代碼簽名的信息，請參閱Forge文檔中的簽署 macOS 應(yīng)用程序指南。

macOS Windows

module.exports = {
  packagerConfig: {
    osxSign: {},
    //...
    osxNotarize: {
      tool: 'notarytool',
      appleId: process.env.APPLE_ID,
      appleIdPassword: process.env.APPLE_PASSWORD,
      teamId: process.env.APPLE_TEAM_ID,
    }
    //...
  }
}

module.exports = {
  //...
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {
        certificateFile: './cert.pfx',
        certificatePassword: process.env.CERTIFICATE_PASSWORD,
      },
    },
  ],
  //...
}