您的位置:

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,并享受其带来的便利。