preface

After the development of Electron code, if you want to put it into production environment, you must go through a key step - packaging.

Use it on MacOS today electron-builder Make a record of the process of packaging Electron application.

Why pack

My last article< Debugging Electron main process code with VSCode >This paper introduces the method of running Electron program in the development environment. Since it can run normally, why do you need to go through the steps of packaging? The reasons are as follows:

1. For cross platform purposes
   Before packaging, if I copy a copy of the source code to other operating systems (such as windows), in order to operate normally, the Electron executive program suitable for 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 application programs suitable for different platforms to achieve the purpose of direct use.
2. To reduce the code size
   As the most basic Electron program, its development environment code volume is about 170MB. Because there are many dev dependencies, it is very unfriendly to the transmission of the program.
   By means of packaging, you can eliminate many development dependencies and reduce the volume of application code.

environment

• Operating system: macOS Catalina 10.15.7
• Electron Version: 16.0.6
• electron-builder: 22.14.5
• Program code:< Debugging Electron main process code with VSCode >Electron quick start directory used in

Packaging steps

1. Installing 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 reuse.

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

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

   After npm run build is executed, 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 has the following file structure:

   ./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
   According to your own needs, in package Add configuration items in JSON.

   // electron-quick-start/package.json
   {
       "name": "myApp",
       ......
       "scripts": {
           ......
           "build": "../electron-builder/node_modules/.bin/electron-builder"
       },
       ......
       "build": {
           "productName": "myFirstApp",    // Specifies the name of the program packaged into, which can contain spaces
           "appId": "bianchengsanmei",
           "directories": {
               "output": "build" // Specifies the output directory of the packer
           },
           "mac": {
               "target": "dmg"
           },
           "dmg": {
               "backgroundColor": "#fff"
           }
       }
   }
   

   Specific configurations can be viewed Official document of electron builder.

Volume comparison before and after packaging

Total volume of development environment:

Package generated dmg package volume:

You can see that the program body is reduced by more than half through packaging.

summary

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

~ End of this article, thank you for reading!

~

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

Hello, I'm Programming samadhi Hermit Wang, my official account is " Programming samadhi "Welcome to pay attention and hope you can give us more advice!

You come, with expectations, I have ink to greet you! You return, no matter gain or loss, only with the rhyme!

Pay equal attention to knowledge and skills, cultivate both internal and external skills, grasp both theory and practice, and be hard on both hands!