封裝你的應用程式

跟著教學走

這是 Electron 教學的第 5 部分。

學習目標

在本教學的這部分中，我們將介紹使用 Electron Forge 封裝和發佈應用程式的基本知識。

使用 Electron Forge

Electron 的核心模組中沒有任何用於封裝和發佈的工具。一旦您在開發模式下擁有可用的 Electron 應用程式，您需要使用額外的工具來建立可發佈給使用者的封裝應用程式（也稱為可發佈檔）。可發佈檔可以是安裝程式（例如 Windows 上的 MSI）或可攜式可執行檔（例如 macOS 上的 .app）。

Electron Forge 是一個多合一工具，可處理 Electron 應用程式的封裝和發佈。在底層，它結合了許多現有的 Electron 工具（例如 @electron/packager、@electron/osx-sign、electron-winstaller 等）到一個單一介面中，因此您不必擔心將它們全部連接在一起。

將您的專案匯入 Forge

您可以在專案的 devDependencies 中安裝 Electron Forge 的 CLI，並使用方便的轉換腳本匯入您現有的專案。

npm
Yarn

npm install --save-dev @electron-forge/cli
npx electron-forge import

npm install --save-dev @electron-forge/cli
yarn dlx electron-forge import

轉換腳本完成後，Forge 應該已在您的 package.json 檔案中新增了一些腳本。

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

CLI 文件

有關 make 和其他 Forge API 的更多資訊，請查看 Electron Forge CLI 文件。

您也應該注意到您的 package.json 現在在 devDependencies 下安裝了一些其他套件，以及一個新的 forge.config.js 檔案，它匯出一個設定物件。您應該在預先填入的設定中看到多個 maker（產生可發佈應用程式套件的套件），每個目標平台一個。

建立可發佈檔

若要建立可發佈檔，請使用您專案新的 make 腳本，該腳本會執行 electron-forge make 命令。

npm
Yarn

npm run make

yarn make

此 make 命令包含兩個步驟

它會先在底層執行 electron-forge package，將您的應用程式碼與 Electron 二進制檔捆綁在一起。封裝的程式碼會產生到一個資料夾中。
然後，它會使用此封裝的應用程式資料夾，為每個設定的 maker 建立單獨的可發佈檔。

腳本執行後，您應該會看到一個 out 資料夾，其中包含可發佈檔和一個包含封裝應用程式碼的資料夾。

macOS 輸出範例
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 資料夾中的可發佈檔應該已準備好啟動！您現在已建立了您的第一個捆綁的 Electron 應用程式。

可發佈檔格式

可以設定 Electron Forge，以建立不同作業系統特定格式的可發佈檔（例如 DMG、deb、MSI 等）。請參閱 Forge 的 Makers 文件，以了解所有設定選項。

建立和新增應用程式圖示

設定自訂應用程式圖示需要對您的設定進行一些新增。請查看 Forge 的圖示教學，以了解更多資訊。

不使用 Electron Forge 進行封裝

如果您想要手動封裝您的程式碼，或者您只是對了解封裝 Electron 應用程式背後的機制感興趣，請查看完整的應用程式封裝文件。

重要事項：簽署您的程式碼

為了將桌面應用程式發佈給終端使用者，我們強烈建議您程式碼簽署您的 Electron 應用程式。程式碼簽署是發佈桌面應用程式的重要部分，並且是教學最後一部分中自動更新步驟的必要條件。

程式碼簽署是一種安全性技術，您可以使用它來證明桌面應用程式是由已知來源建立的。Windows 和 macOS 有其各自作業系統特定的程式碼簽署系統，這會讓使用者難以下載或啟動未簽署的應用程式。

在 macOS 上，程式碼簽署是在應用程式封裝層級完成的。在 Windows 上，簽署的是可發佈的安裝程式。如果您已經有 Windows 和 macOS 的程式碼簽署憑證，您可以在您的 Forge 設定中設定您的憑證。

資訊

有關程式碼簽署的更多資訊，請查看 Forge 文件中的簽署 macOS 應用程式指南。

macOS
Windows

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

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

摘要

Electron 應用程式需要封裝才能發佈給使用者。在本教學中，您將您的應用程式匯入 Electron Forge，並設定其封裝您的應用程式和產生安裝程式。

為了讓使用者的系統信任您的應用程式，您需要透過程式碼簽署來數位認證可發佈檔是真實且未經竄改的。一旦您設定其使用您的程式碼簽署憑證資訊，您的應用程式就可以透過 Forge 簽署。

學習目標​

使用 Electron Forge​

將您的專案匯入 Forge​

建立可發佈檔​

重要事項：簽署您的程式碼​

摘要​

學習目標

使用 Electron Forge

將您的專案匯入 Forge

建立可發佈檔

重要事項：簽署您的程式碼

摘要