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

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

使用 Electron Forge

Electron 的核心模塊中沒(méi)有捆綁任何用于打包或分發(fā)文件的工具。 如果您在開(kāi)發(fā)模式下完成了一個(gè) Electron 應(yīng)用，需要使用額外的工具來(lái)打包應(yīng)用程序 (也稱(chēng)為可分發(fā)文件) 并分發(fā)給用戶(hù) 。 可分發(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 依賴(lài)中，然后使用現(xiàn)成的轉(zhuǎn)化腳本將項(xiàng)目導(dǎo)入至 Electron Forge。

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 的更多信息，請(qǐng)查看 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)平臺(tái)一個(gè)。

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

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

npm run make

yarn run make

該 make 命令包含兩步：

1. 它將首先運(yùn)行 electron-forge package ，把您的應(yīng)用程序 代碼與 Electron 二進(jìn)制包結(jié)合起來(lái)。 完成打包的代碼將會(huì)被生成到一個(gè)特定的文件夾中。
2. 然后它將使用這個(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 通過(guò)配置可以為不同的操作系統(tǒng)創(chuàng)建特定格式的可分發(fā)文件 (例如 DMG、deb、MSI 等)。 相關(guān)配置選項(xiàng)詳情，請(qǐ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)用程序打包 文檔。

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

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

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

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

INFO

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

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,
      },
    },
  ],
  //...
}

摘要?

Electron 應(yīng)用程序需要打包后分發(fā)給用戶(hù)。 在本教程中，您將應(yīng)用程序?qū)?Electron Forge 并對(duì)其進(jìn)行配置以打包您的應(yīng)用程序并生成安裝程序。

為了讓?xiě)?yīng)用程序受到用戶(hù)系統(tǒng)的信任，您需要以數(shù)字簽名證明可分發(fā)文件的內(nèi)容是真實(shí)的并且未被代碼簽名篡改。 只要在應(yīng)用配置中添加簽名證書(shū)信息，您就可以通過(guò) Forge 對(duì)其進(jìn)行簽名。