Electron Packager詳解：打包Electron應用變得更簡單

Electron是構建跨平台桌面應用程序的一種開源框架，而它的打包工具——Electron Packager能夠將代碼打包成可執行文件，更好地驅動用戶體驗和功能，從而讓應用程序的部署更快捷、更簡單。本文將詳細介紹Electron Packager的使用方法。

一、 安裝Electron Packager

首先，我們需要在本機上安裝Node.js。要安裝Electron Packager，我們還需要在命令行中使用npm安裝它。下面是安裝步驟：

  npm install electron-packager -g

如果你想在你的項目目錄中安裝制定版本的Electron Packager，則應使用以下代碼：

  npm install electron-packager --save-dev

二、Electron Packager的使用方法

1. 了解參數

在使用Electron Packager之前，我們必須了解其參數：

 electron-packager   [--platform=] [--arch=] [--version=] [--out=] [optional flags...]

其中，sourcedir表示要打包的應用程序的根目錄，而appname則是打包後的名稱。platform和arch指定打包平台和架構，而version指定Electron版本。

2. 創建packager.js文件

在項目文件夾里創建一個packager.js文件，下面是示例代碼：

  const packager = require('electron-packager');

  const options = {
    dir: './',
    name: 'DemoApp',
    platform: 'win32',
    arch: 'x64',
    version: '2.0.1',
    out: './out',
    icon: './icon.ico'
  };

packager(options, (err, appPaths) => {
  console.log(err);
  console.log(appPaths);
});

在這個文件里，我們定義了應用程序的名稱、平台和架構，以及應用程序的輸出目錄和圖標文件路徑。調用packager()方法，執行打包操作。

3. 執行packager.js文件

在命令行中運行以下代碼，執行packager.js文件，將應用程序打包成為可執行文件：

npm run packager

或者使用以下代碼運行打包程序：

node packager.js

4. 發佈應用程序

打包後，你會在輸出目錄找到你的應用程序。你可以將其分發給用戶，或者發佈到各種應用程序商店，如Steam、Mac App Store、Microsoft Store等等。

三、Electron Packager的高級用法

1. 添加文件

Electron Packager會自動忽略任何在.gitignore文件中指定的文件，如果要打包.gitignore文件中忽略的文件，需要在packager.js文件中添加ignore選項。

var ignore = [
  "/README.md",
  "/node_modules/less",
  "/node_modules/grunt",
  "/node_modules/grunt-cli",
  "/node_modules/grunt-contrib-uglify",
];
const options = {
  ignore: ignore,
  ...
};

通過ignore數組來添加要排除的文件，它與.gitignore文件的寫法是相同的。

2. 轉換為安裝包

Electron Packager可以把你的應用程序打包成多種不同的格式，包括ZIP、DMG、NSIS和RPM等。下面是將應用程序打包成NSIS的代碼：

  const nsis = require('electron-builder');

  nsis.build({
    targets: nsis.Platform.WINDOWS.createTarget(),
    config: {
      appName: "DemoApp",
      artifactName: '${productName} Setup ${version}.${ext}',
      nsis: {
        oneClick: false,
        perMachine: true,
        allowToChangeInstallationDirectory: true,
      }
    },
    x64: true
  });

這段代碼會將應用程序打包成一個NSIS安裝包。在這裡，我們定義了應用程序名稱、輸出文件名和NSIS安裝包的選項。

3. 為不同的平台打包不同的應用程序

有時我們希望為同一應用程序的不同平台打包不同的應用程序，這時候可以使用多個packager.js（或使用更好的構建工具，如webpack和gulp）。

例如，我們可以有一個專門為Windows用戶打包的packager.windows.js文件：

  const packager = require('electron-packager');

  const options = {
    dir: './',
    name: 'DemoApp',
    platform: 'win32',
    arch: 'x64',
    version: '2.0.1',
    out: './out-windows',
    icon: './icon.ico'
  };

packager(options, (err, appPaths) => {
  console.log(err);
  console.log(appPaths);
});

和一個專為Mac用戶打包的packager.mac.js文件：

  const packager = require('electron-packager');

  const options = {
    dir: './',
    name: 'DemoApp',
    platform: 'darwin',
    arch: 'x64',
    version: '2.0.1',
    out: './out-mac',
    icon: './icon.icns'
  };

packager(options, (err, appPaths) => {
  console.log(err);
  console.log(appPaths);
});

然後，我們可以使用npm腳本來執行這兩個打包任務：

"scripts": {
  "package-windows": "node packager.windows.js",
  "package-mac": "node packager.mac.js"
}

結語

藉助Electron Packager，你可以將你的應用程序打包成可執行文件，發佈到各種平台，讓你的用戶更方便地下載和使用它。使用本文中的指南，您可以快速開始使用Electron Packager，並享受其帶來的便利。