Packaging Electron programs with electron-builder

foreword

After the Electron code is developed, if you want to put it into a production environment, you must go through a very critical step - packaging.

Today, I will record the process of packaging Electron applications electron-builder

Why pack

My last article " Using VSCode to Debug Electron Main Process Code " introduced the method of running Electron programs in the development environment. Since it can run normally, why do you need to go through the packaging steps? The reasons are as follows:

1. For cross-platform purpose
   Before packaging, if I copy the source code to other operating systems (such as windows), if it is to run normally, the Electron executable program that adapts to the system must be installed on the corresponding system.
   In order to reduce the complexity of cross-platform, we need to package the program code into an application program that adapts to the platform for different platforms, so as to achieve the purpose of direct use.
2. To reduce code size
   A most basic Electron program, its development environment code volume is about 170MB, because there are many development dependencies ( devDependencies ), it is extremely unfriendly to program transmission.
   Through packaging, you can check out many development dependencies and simplify the application code size.

surroundings

• OS: macOS Catalina 10.15.7
• Electron Version: 16.0.6
• electron-builder: 22.14.5
• Program code: " use VSCode debugging Electron main process code " used in electron-quick-start directory

Packaging step

1. Install electron-builder

   mkdir electron-builder
   cd electron-builder
   yarn init -y
   yarn add electron-builder -D

   It is recommended to install electron-builder in a separate directory for easy reuse.

2. Add packaging instructions (can also be executed directly in the terminal)

   // electron-quick-start/package.json
   {
       "name": "myApp",
       ……
       "scripts": {
           ……
           "build": "../electron-builder/node_modules/.bin/electron-builder"
       },
       ……
   }

   After executing npm run build , the terminal information is as follows:

   > Executing task: npm run build <
   > myApp@1.0.0 build
   > ../electron-builder/node_modules/.bin/electron-builder
   
     • electron-builder  version=22.14.5 os=19.6.0
     • writing effective config  file=dist/builder-effective-config.yaml
     • packaging       platform=darwin arch=x64 electron=16.0.6 appOutDir=dist/mac
     • default Electron icon is used  reason=application icon is not set
     • skipped macOS application code signing  reason=cannot find valid "Developer ID Application" identity or custom non-Apple code signing certificate, see https://electron.build/code-signing allIdentities=     0 identities found
                                                   Valid identities only
        0 valid identities found
     • building        target=macOS zip arch=x64 file=dist/myApp-1.0.0-mac.zip
     • building        target=DMG arch=x64 file=dist/myApp-1.0.0.dmg
     • building block map  blockMapFile=dist/myApp-1.0.0.dmg.blockmap
     • building block map  blockMapFile=dist/myApp-1.0.0-mac.zip.blockmap

   The dist folder generated under electron-quick-start

   ./dist
   ├── builder-debug.yml
   ├── builder-effective-config.yaml
   ├── latest-mac.yml
   ├── mac
   │   └── myApp.app
   ├── myApp-1.0.0-mac.zip
   ├── myApp-1.0.0-mac.zip.blockmap
   ├── myApp-1.0.0.dmg
   └── myApp-1.0.0.dmg.blockmap

3. Packaging configuration
   You can add configuration items package.json according to your own needs.

   // electron-quick-start/package.json
   {
       "name": "myApp",
       ……
       "scripts": {
           ……
           "build": "../electron-builder/node_modules/.bin/electron-builder"
       },
       ……
       "build": {
           "productName": "myFirstApp",    // 指定打包成的程序名称，可包含空格
           "appId": "bianchengsanmei",
           "directories": {
               "output": "build" // 指定打包程序的输出目录
           },
           "mac": {
               "target": "dmg"
           },
           "dmg": {
               "backgroundColor": "#fff"
           }
       }
   }

   For specific configuration, please electron-builder official document .

Volume comparison before and after packing

The total volume of the development environment:

.dmg installation package generated by packaging:

It can be seen that by packaging, the program body is reduced by more than half.

Summarize

The above is a simple Electron application packaging process, I hope it can help you.

~

~ This article is over, thanks for reading!

~

Learn interesting knowledge, meet interesting friends, and shape interesting souls!

Hello everyone, I'm Hermit King , the author Programming Samadhi 〗, my public is "161f1a848e0103 Programming Samadhi ", welcome to pay attention, I hope you can give me more advice!

You come, with expectations, I have the fragrance of ink to welcome you! You return, no matter what you gain or lose, you can only give it away with the aftertaste!

Both knowledge and skills are emphasized, internal and external skills are cultivated, both theory and practice must be grasped, and both hands must be hard!