The method of electric builder to package the project and generate the installation package

Electron build is a package tool for Electron projects. With Electron build, you can quickly package projects and generate Nsis based visual installation packages for easy distribution.

text

1. install
   To package a project with Electron build, you need to install the Electron build dependency first.

    #You can choose to install it to global or project development dependency yarn add electron-builder -D

   After the installation is completed, in package.json devDependencies Item can see it.

2. Configuring Packaging Commands
   Add two new commands pack and dist to the scripts of package.json:

    "scripts": { "start": "electron .", "pack":"electron-builder --dir", "dist":"electron-builder" }

   • pack The command does not package, but only generates a package folder compressed package for testing the process.
   • dist Mr. Hui creates a packed folder (xxx unpacked), and then packages it into a Setup installation package.
3. Configure the build parameter
   The build parameter is used by the electric builder, and our packaging parameters can be configured here.
   Detailed parameters and applicable platform reference: https://www.electron.build/configuration/configuration

    //package.json "build":{ "appId":"com.azimiao.test", "asar":true, "afterPack":"./build/afterPack.js", "directories":{ "buildResources":"build", "output":"dist" }, "win":{ "target": [{ "target":"nsis" }], "icon":"build/favicon.ico", "asarUnpack":[ "src/**", "README.md" ] }, "nsis":{ "oneClick":false, "allowElevation":true, "allowToChangeInstallationDirectory":true, "installerIcon":"build/install_favicon.ico", "uninstallerIcon":"build/uninstall_favicon.ico", "createDesktopShortcut": true, "createStartMenuShortcut": true } }

   Briefly introduce the important configuration items in the following packaging parameters:

   • directories.buildResources : The default value is build, which is the resource folder when packaging. This folder will not be packaged into the program, but can place some icons, resources, etc. needed for packaging.
   • directories.output : The default value is dist, which is the packaging output folder.
   • afterPack : The script to be executed after generating the Unpack folder. It is run after packaging and before generating the installation package. I use it to delete files such as README.md that do not need to be put into the installation package.
   • win.target : The default value is nsis, which specifies the packaging type of the win platform, such as appx, msi, zip, etc.
   • win.asarUnpack : resources that will not be compressed into app.asar.
   • nsis.allowToChangeInstallationDirectory : Whether the generated installation package allows changing the installation location.

   My afterPack.js content:

    const fs = require("fs"); const path = require("path"); async function afterPack(context){ //Delete the README file so that it is not included in the Setup package. let readmePath = path.join(context.appOutDir,"resources/app.asar.unpacked/README.md"); if(fs.existsSync(readmePath)){ fs.unlinkSync(readmePath); } } module.exports = afterPack;

4. pack
   Execute the following command:

    yarn dist

   If appropriate, the contents of dist folder after packaging are as follows:

   

   among unpacked Is the source folder of the installation package, Setup Is an Nsis based installation package. Setup.exe It can be directly used for distribution.

5. test
   Double click the Setup file to install our packaged program.