React Academy · Leçon

Empaquetage et distribution pour les plateformes de bureau

Créez des programmes d’installation pour macOS, Windows et Linux avec electron-builder, en ajoutant la signature du code et la mise à jour automatique.

Leçon 4 sur 413 étapes

Empaquetage et distribution pour les plateformes de bureau est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Configuration d’electron-builder

electron-builder est l’outil standard pour empaqueter les applications Electron dans des installateurs distribuables. Sa configuration se trouve dans package.json, sous la clé "build", où sont indiquées les métadonnées de l’application (appId, productName), les chemins des icônes et les formats cibles propres à chaque plateforme.

Cibles de compilation par plateforme

electron-builder prend en charge macOS (dmg et zip), Windows (installateur NSIS) et Linux (AppImage et deb). Vous pouvez cibler plusieurs plateformes avec une seule commande de compilation ou configurer l’intégration continue pour compiler chaque plateforme sur son propre agent, afin d’obtenir la meilleure compatibilité.

Signature du code pour macOS

macOS exige une signature du code avec un certificat Apple Developer pour que Gatekeeper autorise les utilisateurs à ouvrir l’application sans afficher d’avertissement de sécurité. Pendant la compilation, electron-builder lit votre certificat dans le trousseau de clés de macOS et signe automatiquement tous les fichiers binaires.

Notarisation pour macOS

Au-delà de la signature du code, les versions modernes de macOS exigent également une notarisation : vous envoyez l’application au service de notarisation d’Apple, qui recherche les logiciels malveillants et délivre un ticket. electron-builder peut automatiser la notarisation via electron-notarize, et les utilisateurs de macOS 10.15 ou version ultérieure seront bloqués sans cette étape.

Signature du code pour Windows

Windows exige un certificat Authenticode délivré par une autorité de certification de confiance (CA) pour que SmartScreen approuve votre installateur. Sans signature, les utilisateurs voient l’avertissement « Windows a protégé votre PC ». Les certificats à validation étendue (EV) suppriment immédiatement cet avertissement, tandis que les certificats OV standard gagnent la confiance au fil du temps.

Structure de la sortie de compilation

Après une compilation réussie, electron-builder écrit les installateurs propres à chaque plateforme dans le répertoire dist/. Vous y trouverez le DMG ou le fichier zip pour macOS, le fichier .exe NSIS pour Windows et l’AppImage ou le fichier .deb pour Linux, ainsi qu’un manifeste de mise à jour automatique latest.yml (ou latest-mac.yml).

Icônes d’application

Les applications Electron ont besoin d’icônes dans des formats propres à chaque plateforme : un PNG 512x512 pour Linux, un fichier ICNS (multi-résolution) pour macOS et un fichier ICO (multi-résolution) pour Windows. electron-builder peut générer tous les formats à partir d’un seul PNG 1024x1024 avec l’option --icon.

Mise à jour automatique avec electron-updater

Le paquet electron-updater s’intègre à electron-builder pour fournir des mises à jour automatiques. Publiez vos compilations dans les versions GitHub ou sur S3 : electron-updater peut rechercher les mises à jour au démarrage, télécharger la mise à jour différentielle en arrière-plan et proposer à l’utilisateur de redémarrer.

Recherche de mises à jour au démarrage

Appelez autoUpdater.checkForUpdatesAndNotify() dans main.js une fois l’application prête. electron-updater récupère le manifeste latest.yml depuis votre cible de publication, compare les versions et, si une mise à jour est disponible, la télécharge puis affiche une notification système native lorsqu’elle est prête à être installée.

L’archive ASAR

electron-builder regroupe les fichiers JavaScript de votre application dans une seule archive ASAR (semblable à un fichier tar) pour la distribuer. Cela améliore les performances au démarrage en réduisant les recherches dans le système de fichiers et rend l’inspection directe de votre code source plus difficile, sans toutefois l’empêcher.

Extraction des modules natifs depuis ASAR

Les modules Node.js natifs (fichiers .node) ne peuvent pas être chargés depuis l’intérieur d’une archive ASAR : ils doivent être extraits dans le système de fichiers. Configurez asarUnpack dans electron-builder pour répertorier les modèles de modules natifs ; ceux-ci seront placés dans le répertoire app.asar.unpacked, à côté de l’archive.

Exigence de notarisation pour macOS

Pourquoi la notarisation est-elle requise pour distribuer une application macOS, en plus de la simple signature du code ?

Récapitulatif de la leçon

Distribuer une application Electron implique de configurer les cibles d’electron-builder, de signer le code pour macOS (avec notarisation) et Windows (Authenticode), et éventuellement de configurer les mises à jour automatiques avec electron-updater. L’archive ASAR regroupe votre application pour la distribution, tandis que les modules natifs sont extraits séparément. Une chaîne CI/CD solide automatise ces étapes pour chaque plateforme.

Gratuit pour commencer

Apprends React avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours
88
Leçons
324

Questions Fréquemment Posées

La leçon « Empaquetage et distribution pour les plateformes de bureau » est-elle gratuite ?

Oui — le texte complet de « Empaquetage et distribution pour les plateformes de bureau » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Empaquetage et distribution pour les plateformes de bureau » ?

Créez des programmes d’installation pour macOS, Windows et Linux avec electron-builder, en ajoutant la signature du code et la mise à jour automatique. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Empaquetage et distribution pour les plateformes de bureau » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Architecture d’Electron : processus principal et processus de rendu
  2. Configurer React avec Electron
  3. Communication IPC entre les processus
  4. Empaquetage et distribution pour les plateformes de bureau
← Retour à React Academy