“This is the third day of my participation in the First Challenge 2022, for more details: First Challenge 2022”.

preface

After developing the Electron code, if you want to put it into production, you have to go through a crucial step — packaging.

Today, take a look at the process of packaging the electron application on MacOS using the electron Builder.

Why pack

My previous article “debugging Electron main process code with VSCode” introduced how to run Electron in a development environment. If it works, why do I need to go through the packaging step? Here’s why:

  1. For cross-platform purposes, if I were to make a copy of the source code to another operating system (such as Windows) before packaging it, I would have to install the Electron executable for that system in order for it to run properly. In order to reduce the complexity of cross-platform, we need to package the program code into platform-adapted applications for different platforms, so as to achieve the purpose of direct use.
  2. To reduce the size of the code a basic Electron program has a development environment code size of about 170MB because there are many development dependencies (devDependencies) is extremely unfriendly to the transmission of programs. Packaging can eliminate many development dependencies and reduce application code volume.

The environment

  • Operating system:MacOS Catalina 10.15.7
  • Electron Version: 16.0.6
  • Electron – builder: 22.14.5
  • Program code:Debug the Electron main process code using VSCode”electron-quick-startdirectory

Packaging steps

  1. Install the electron – builder

    mkdir electron-builder
cd electron-builder
yarn init -y
yarn add electron-builder -D
Copy the code

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

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

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

    After NPM run build is executed, the terminal information is as follows:

    > Executing task: NPM run build < > [email protected] build >.. / electronic-builder /node_modules/. Bin/electronic-builder • electronic-Builder version= 22.14.5OS =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 notsetTo be skipped or skipped. • Fluctuating 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 blockmap blockMapFile=dist/ Myapp-1.0.0. DMG BlockMapFile = dist/myApp - 1.0.0 - MAC. Zip. BlockmapCopy the code

    The file structure of the dist folder generated under electron-quick-start is as follows:

    . / dist ├ ─ ─ builder - debug. Yml ├ ─ ─ builder - effective - config. Yaml ├ ─ ─ latest - MAC. Yml ├ ─ ─ MAC │ └ ─ ─ myApp. App ├ ─ ─ ├─ ├─ MyApp-1.0.0.dmg ├─ MyApp-1.0.0.dmg. ├─ MyApp-1.0.0.dmgCopy the code

  3. The packaging configuration can add configuration items to package.json as needed.

    // electron-quick-start/package.json
{
    "name": "myApp"And..."scripts": {..."build": ".. /electron-builder/node_modules/.bin/electron-builder"},..."build": {
        "productName": "myFirstApp".// Specify the name of the packaged program, which can contain Spaces
        "appId": "bianchengsanmei"."directories": {
            "output": "build" // Specify the output directory for the wrapper
        },
        "mac": {
            "target": "dmg"
        },
        "dmg": {
            "backgroundColor": "#fff"}}}Copy the code

    For details about configuration, see the official document of electron- Builder.

Comparison of volume before and after packing

Total development environment volume:

Package generated.dmg installation package volume:

As you can see, packaging reduces the body of the program by more than half.

conclusion

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

~

Thanks for reading!

~

Learn interesting knowledge, meet interesting friends, shape interesting soul!

Hello everyone, I am the author of “programming Samadhi”, I am king Yi, my public account is “programming Samadhi”, welcome to pay attention, I hope you can give me more advice!

You come, with expectations, I have ink to welcome! You return, no matter gain or loss, only to yu Yun give each other!

Knowledge and skills should be paid equal attention to, internal force and external power should be repaired simultaneously, theory and practice should grasp both hands, both hands should be hard!