Hand in hand to teach you to package the front-end code into MSI and exe files

Time:2020-9-15

This paper mainly introduces how to package electron application into MSI and exe files.
Because there are few articles about electron packaged into MSI and exe, and the official documents have also mentioned it. In the process of research, many holes have been stepped on. So write this article for reference to others.
For articles on electron’s basic knowledge, the official documents are very detailed and will not be repeated here. For children’s shoes that have not yet been introduced, you can see Fang’s introduction document:
https://github.com/electron/e…

<!– more –>
Before following this article, please make sure that nodejs and electron module are installed on the computer, and then there is a written electron application.

Hand in hand to teach you to package the front-end code into MSI and exe files

1. Package it into a running package

Before packaging, there are two ways to run your app with electron

  • Open the command line in the application directory and enterelectron .

  • Enter on the command lineelectron, start an electron window and set the mian.js Drag into the window.

This way is not very elegant. I want to run it by double clicking? The following steps are all in the application root directory, that is, electron in the figure above_ Under Zhihu)

1.1 installation dependency
Regular packaging needs to be usedelectron-packagerModule, so enter it on the command line firstnpm install --save-dev electron-packagerInstallation.
one point two package.json Add a packing command to avoid entering a long list of commands each time you pack

"scripts": {
    "package": "electron-packager ./ zhihu --win --out zhihu --arch=x64 --version 1.3.4 --overwrite --ignore=node_modules" 
} 

Parameter description

electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>
Location of project: application directory;
Name of project: application name;
Platform: the platform to package;
Architecture: x86 or x64 architecture;
Electronic version: the electronic version (not the application version);
Optional options: other options;

1.3 executionnpm run-script packageStart to package. The first package will download the package of the corresponding platform, which may take a long time
After packaging, there will be an additional directory, such as minezhihuAfter opening, there will be onezhihu-win32-x64Directory, which contains various files generated by packaging:
Hand in hand to teach you to package the front-end code into MSI and exe files

zhihu.exeIt can be run directly by double clicking,resourcesHere’s the source file.
Attention, node_ Modules will not be packaged. If there are dependencies, remember to enterresources/appDirectory inputnpm installInstall the dependencies.

2. Package it into an installation package

Officially recommended by electrongrunt-electron-installerThe module automatically generates the windows installation wizard.
Note: the following operations are in thezhihu-win32-x64In the parent directory of

2.1 installation of grunt electron installer
newly buildpackage.jsonfile
Hand in hand to teach you to package the front-end code into MSI and exe files

package.jsonIt can be simply written as follows:

{
  "name": "zhihu",
  "version": "1.0.0"  
}

Open the command line and typenpm install grunt-electron-installer --save-devinstallgrunt-electron-installerModule, then inputnpm install grunt --save-devInstall grunt.

2.2 configuration Gruntfile.js
Because you want to use grunt to perform the packing task, create a new oneGruntfile.jsFile and configure gurnt.config , my configuration is as follows:

var grunt = require("grunt");
grunt.config.init({
    pkg: grunt.file.readJSON('package.json'),
    'create-windows-installer': {
        x64: {
            appDirectory: './zhihu-win32-x64',
            authors: 'yohnz.',
            exe: 'zhihu.exe',
            description:"zhihu",
        }       
    }
})

grunt.loadNpmTasks('grunt-electron-installer');
grunt.registerTask('default', ['create-windows-installer']);

Configuration Description:

Config Name Required Description
appDirectory Yes Catalog of electron app
outputDirectory No Output exe directory. Default generated in the installer directory
loadingGif No Loading animation images during installation
authors Yes Author, if not specified, from package.json Read from file
owners No The application owner, if undefined, is the same as the author
exe No The name of the entry exe of the application
description No Application description
version No Apply version number
title No Applied title
certificateFile No Certificate file
certificatePassword No encryption key
signWithParams No The parameter passed to signool signature tool. If the software does not sign, this can be ignored
iconUrl No Application icon link, the default is atom icon
setupIcon No Setup.exe Icon of
noMsi No Do you want to create the. MSI setup file?
remoteReleases No Update the link. If you fill in the link, the new version will be downloaded and installed automatically.

2.3 grunt packaging
Enter on the command linenpm gruntThe automatic build setup program is executed. The following files will appear in the installer directory (or your configured output directory) after the build
Hand in hand to teach you to package the front-end code into MSI and exe files
function setup.exe We went to ‘control panel’ -‘programs and functions’ to check and found that the application has been installed.
Hand in hand to teach you to package the front-end code into MSI and exe files

2.4 generating shortcuts
Here, the installation file of electron is packed, but after installation, no shortcut is automatically generated. Therefore, we need to use the main.js Add the function of generating shortcut.

  • Add monitor and generate shortcut

var handleStartupEvent = function () {
  if (process.platform !== 'win32') {
    return false;
  }

  var squirrelCommand = process.argv[1];

  switch (squirrelCommand) {
    case '--squirrel-install':
    case '--squirrel-updated':
      install();
      return true;
    case '--squirrel-uninstall':
      uninstall();
      app.quit();
      return true;
    case '--squirrel-obsolete':
      app.quit();
      return true;
  }
    //Installation
  function install() {
    var cp = require('child_process');    
    var updateDotExe = path.resolve(path.dirname(process.execPath), '..', 'update.exe');
    var target = path.basename(process.execPath);
    var child = cp.spawn(updateDotExe, ["--createShortcut", target], { detached: true });
    child.on('close', function(code) {
        app.quit();
    });
  }
   //Uninstall
   function uninstall() {
    var cp = require('child_process');    
    var updateDotExe = path.resolve(path.dirname(process.execPath), '..', 'update.exe');
    var target = path.basename(process.execPath);
    var child = cp.spawn(updateDotExe, ["--removeShortcut", target], { detached: true });
    child.on('close', function(code) {
        app.quit();
    });
  }

};

if (handleStartupEvent()) {
  return;
}

Run steps 1.3 and 2.3 to repackage. At this point, run again setup.exe After installation, the shortcut will be automatically generated on the desktop and start menu. However, you may find that the name of the shortcut is electron instead of the app name you set. If you compare Virgo, you can continue with the following steps:
2.5. Modify packing parameters
Modify the packing parameters in step 1.2 by adding:--version-string.CompanyName=zhihu --version-string.ProductName=zhihu
The complete command is as follows:

  "scripts": {
    "package": "electron-packager ./ zhihu --win --out zhihu --arch=x64 --version 1.3.4 --overwrite --ignore=node_modules --version-string.CompanyName=zhihu --version-string.ProductName=zhihu"
  },

Then rerun steps 1.3 and 2.3 to package. At this time, the compiled installation package can run and generate desktop shortcut and start menu.

Running screenshot

Hand in hand to teach you to package the front-end code into MSI and exe files
Hand in hand to teach you to package the front-end code into MSI and exe files

The configuration file and code source file of the project have been uploaded to GitHub. Welcome to star: https://github.com/yohnz/Elec…

Please state the source of Reprint: http://yohnz.github.io/2016/1…

reference material:
https://github.com/electron/g…
https://github.com/electron/e…
http://blog.csdn.net/w3429160…