Pakowanie i dystrybucja na platformy desktopowe
Proszę zbudować instalatory dla macOS, Windows i Linux za pomocą electron-builder, dodając podpisywanie kodu i automatyczne aktualizacje.
Pakowanie i dystrybucja na platformy desktopowe to bezpłatna lekcja React Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.
Konfiguracja electron-builder
electron-builder to standardowe narzędzie do pakowania aplikacji Electron w instalatory przeznaczone do dystrybucji. Jego konfiguracja znajduje się w package.json pod kluczem "build" i określa metadane aplikacji (appId, productName), ścieżki ikon oraz formaty docelowe dla poszczególnych platform.
Cele kompilacji według platformy
electron-builder obsługuje macOS (dmg i zip), Windows (instalator NSIS) oraz Linux (AppImage i deb). Można wskazać wiele platform w jednym poleceniu kompilacji albo skonfigurować CI tak, aby kompilował każdą platformę na właściwym dla niej runnerze, co zapewnia najlepszą zgodność.
Podpisywanie kodu w systemie macOS
macOS wymaga podpisywania kodu certyfikatem Apple Developer, aby Gatekeeper pozwolił użytkownikom otworzyć aplikację bez ostrzeżenia dotyczącego bezpieczeństwa. electron-builder odczytuje certyfikat z macOS Keychain podczas procesu kompilacji i automatycznie podpisuje wszystkie pliki binarne.
Notaryzacja w systemie macOS
Oprócz podpisywania kodu współczesny macOS wymaga również notaryzacji — przesłania aplikacji do usługi notaryzacji Apple, która skanuje ją pod kątem złośliwego oprogramowania i wystawia bilet. electron-builder może zautomatyzować notaryzację za pośrednictwem electron-notarize, a użytkownicy macOS 10.15+ nie będą mogli bez niej uruchomić aplikacji.
Podpisywanie kodu w systemie Windows
Windows wymaga certyfikatu Authenticode od zaufanego urzędu certyfikacji (CA), aby SmartScreen ufał instalatorowi. Bez podpisu użytkownicy zobaczą ostrzeżenie „System Windows ochronił komputer”. Certyfikaty Extended Validation (EV) usuwają to ostrzeżenie natychmiast, natomiast standardowe certyfikaty OV budują zaufanie stopniowo.
Struktura wyników kompilacji
Po pomyślnej kompilacji electron-builder zapisuje instalatory właściwe dla poszczególnych platform w katalogu dist/. Znajdują się tam plik DMG lub zip dla macOS, plik .exe instalatora NSIS dla Windows oraz AppImage lub .deb dla Linuxa, a także manifest automatycznych aktualizacji latest.yml (lub latest-mac.yml).
Ikony aplikacji
Aplikacje Electron wymagają ikon w formatach właściwych dla poszczególnych platform: PNG o rozmiarze 512x512 dla Linuxa, pliku ICNS (wielorozdzielczego) dla macOS oraz pliku ICO (wielorozdzielczego) dla Windows. electron-builder może wygenerować wszystkie formaty z pojedynczego pliku PNG o rozmiarze 1024x1024 przy użyciu flagi --icon.
Automatyczne aktualizacje z electron-updater
Pakiet electron-updater integruje się z electron-builderem, zapewniając automatyczne aktualizacje. Należy opublikować kompilacje w GitHub Releases lub S3, a electron-updater będzie mógł sprawdzać aktualizacje przy uruchomieniu, pobierać aktualizację różnicową w tle i prosić użytkownika o ponowne uruchomienie.
Sprawdzanie aktualizacji przy uruchomieniu
Należy wywołać autoUpdater.checkForUpdatesAndNotify() w main.js po przygotowaniu aplikacji. electron-updater pobiera manifest latest.yml z docelowej lokalizacji publikacji, porównuje wersje, a jeśli aktualizacja jest dostępna, pobiera ją i wyświetla natywne powiadomienie, gdy będzie gotowa do zainstalowania.
Archiwum ASAR
electron-builder pakuje pliki JavaScript aplikacji w pojedyncze archiwum ASAR (podobne do pliku tar) przeznaczone do dystrybucji. Poprawia to wydajność uruchamiania, ograniczając liczbę operacji wyszukiwania plików, i utrudnia bezpośrednie przeglądanie kodu źródłowego, choć go nie uniemożliwia.
Wypakowywanie modułów natywnych z ASAR
Natywnych modułów Node.js (plików .node) nie można ładować z wnętrza archiwum ASAR — muszą zostać wypakowane do systemu plików. W konfiguracji electron-builder należy ustawić asarUnpack i podać wzorce natywnych modułów. Zostaną one umieszczone w katalogu app.asar.unpacked obok archiwum.
Wymóg notaryzacji w systemie macOS
Dlaczego notaryzacja jest wymagana przy dystrybucji aplikacji na macOS, oprócz samego podpisywania kodu?
Podsumowanie lekcji
Dystrybucja aplikacji Electron obejmuje konfigurację celów electron-builder, podpisanie kodu dla macOS (wraz z notaryzacją) i Windows (za pomocą Authenticode), a także opcjonalne skonfigurowanie automatycznych aktualizacji z electron-updater. Archiwum ASAR pakuje aplikację na potrzeby dystrybucji, a moduły natywne są wypakowywane osobno. Solidny potok CI/CD automatycznie obsługuje te kroki dla każdej platformy.
Ucz się React dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 88
- Lekcje
- 324
Często zadawane pytania
Czy lekcja „Pakowanie i dystrybucja na platformy desktopowe” jest bezpłatna?
Tak — pełny tekst „Pakowanie i dystrybucja na platformy desktopowe” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Pakowanie i dystrybucja na platformy desktopowe”?
Proszę zbudować instalatory dla macOS, Windows i Linux za pomocą electron-builder, dodając podpisywanie kodu i automatyczne aktualizacje. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć React Academy?
Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Pakowanie i dystrybucja na platformy desktopowe”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?
Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Architektura Electron: proces główny i proces renderera
- Konfiguracja Reacta z Electron
- Komunikacja IPC między procesami
- Pakowanie i dystrybucja na platformy desktopowe