YouTip

Electron application development is completed, the application needs to be packaged into desktop executable files and released to users. Packaging and distribution process involves tool selection, configuration, signing, and update strategy, among other aspects. * * * ## Packaging Tools Introduction ### electron-builder * Highly automated, supports Windows, macOS, Linux * Supports auto-update functionality * Simple configuration, suitable for production environments * Can generate `.exe`, `.dmg`, `.AppImage`, and other formats ### electron-packager * Officially recommended packaging tool, lightweight * Only responsible for generating executable files, no auto-update included * Simple configuration, but requires combining with other tools for installer packages and signing ### electron-forge * Integrated packaging, templates, auto-update, and release process * Ready to use out of the box, suitable for beginners to quickly start projects * Built-in Webpack / ESBuild build support ### Tool Comparison and Selection | Tool | Features | Advantages | Applicable Scenarios | | --- | --- | --- | --- | | electron-builder | High automation, cross-platform, supports updates | Simple configuration, suitable for production | Complex application releases | | electron-packager | Lightweight, official support | Flexible combination with other tools | Simple application packaging | | electron-forge | Integrated development tools, quick start | Ready to use, built-in build | Beginners or rapid prototyping | * * * ## Configuring Packaging Parameters ### [](#)**package.json Configuration** "build": { "appId": "com.example.myapp", "productName": "MyElectronApp", "directories": { "output": "dist" }, "files": ["**/*"], "extraResources": ["assets/"], "mac": { "category": "public.app-category.utilities" }, "win": { "target": "nsis", "icon": "build/icon.ico" }, "linux": { "target": ["AppImage", "deb"], "icon": "build/icon.png" }} ### Platform-Specific Configuration * **Windows**: Installer type (NSIS, Squirrel), icon `.ico` * **macOS**: Application category, signing, `.icns` icon * **Linux**: Target format (AppImage, deb, rpm), icon PNG ### Icons and Resource Files * Icon dimensions and formats must meet platform requirements * Additional resources can be added via `extraResources` or `extraFiles` * * * ## Multi-Platform Packaging ### Windows Packaging electron-builder --win * Can generate `.exe` or `.msi` installer files * Supports NSIS installation wizard, silent installation ### macOS Packaging electron-builder --mac * Can generate `.dmg` or `.pkg` * Combined with Notarization to pass macOS Gatekeeper ### Linux Packaging electron-builder --linux * Common formats: AppImage, deb, rpm * Suitable for desktop distribution across different distributions ### Cross-Compilation * Electron-builder supports cross-platform building, but macOS applications must be signed on macOS * Windows / Linux can achieve cross-packaging through Linux or Windows build virtual machines * * * ## Code Signing ### Windows Code Signing * Use digital certificate (.pfx) to sign `.exe` or `.msi` * Example: electron-builder --win --csc-link path/to/certificate.pfx --csc-key-password yourpassword * Enhances user trust, avoids SmartScreen blocking ### macOS Notarization * Apple officially requires application notarization to pass Gatekeeper * Requires Apple Developer account * Build example: electron-builder --mac --publish never * Use `notarize` API to upload application for automatic notarization ### Certificate Application and Management * Windows: Purchase EV or standard code signing certificate * macOS: Apply for developer certificate with Apple Developer account * Certificates must be securely stored to avoid leakage * * * ## Auto-Update ### electron-updater Usage * Works with electron-builder, supports differential updates * Install `electron-updater`: npm install electron-updater Main process example: const { autoUpdater } = require('electron-updater') autoUpdater.on('update-available', () => console.log('New version found')) autoUpdater.on('update-downloaded', () => autoUpdater.quitAndInstall()) autoUpdater.checkForUpdates() ### Update Server Setup * Can use GitHub Releases, private servers, or CDN * Provide JSON file describing latest version information ### Differential Updates * Only download changed files, reducing bandwidth consumption * electron-updater built-in support for NSIS / Squirrel / AppImage differential updates ### Update Strategy * Automatic update check (at startup or scheduled) * Manual update trigger * Popup prompt asking user whether to update immediately or delay update * * * ## Summary Electron packaging and distribution core process: * **Select tools**: electron-builder, electron-packager, electron-forge * **Configure parameters**: Define platform, icon, resources in package.json * **Multi-platform packaging**: Windows, macOS, Linux * **Code signing**: Ensure application trustworthiness, avoid security warnings * **Auto-update**: Enhance user experience, support differential updates Following best practices allows Electron applications to be quickly and securely distributed to users, while facilitating subsequent iteration and updates.