React Academy · Lektion

Pakning og distribution til desktopplatforme

Byg installationsprogrammer til macOS, Windows og Linux med electron-builder, kodesignering og automatisk opdatering.

Lektion 4 af 413 trin

Pakning og distribution til desktopplatforme er en gratis React Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Konfiguration af electron-builder

electron-builder er standardværktøjet til at pakke Electron-apps som installationsprogrammer, der kan distribueres. Konfigurationen ligger i package.json under nøglen "build" og angiver metadata for appen (appId, productName), ikonstier og målformater for hver platform.

Buildmål for hver platform

electron-builder understøtter macOS (dmg og zip), Windows (nsis-installationsprogram) og Linux (AppImage og deb). Du kan målrette flere platforme med én build-kommando eller konfigurere CI til at bygge hver platform på dens egen runner for at opnå den bedste kompatibilitet.

Kodesignering til macOS

macOS kræver kodesignering med et Apple Developer-certifikat, for at Gatekeeper lader brugere åbne appen uden en sikkerhedsadvarsel. electron-builder læser dit certifikat fra macOS Keychain under buildprocessen og signerer automatisk alle binære filer.

Notarisering til macOS

Ud over kodesignering kræver moderne macOS også notarisering — du indsender appen til Apples notariseringsservice, som scanner den for skadelig software og udsteder en billet. electron-builder kan automatisere notarisering via electron-notarize, og brugere på macOS 10.15 eller nyere bliver blokeret uden den.

Kodesignering til Windows

Windows kræver et Authenticode-certifikat fra en betroet certifikatautoritet (CA), for at SmartScreen kan have tillid til dit installationsprogram. Uden signering får brugerne advarslen "Windows protected your PC". Extended Validation-certifikater (EV) fjerner advarslen med det samme, mens almindelige OV-certifikater opbygger tillid over tid.

Strukturen af build-output

Efter et vellykket build skriver electron-builder platformsspecifikke installationsprogrammer til mappen dist/. Her finder du DMG- eller zip-filen til macOS, NSIS-.exe-filen til Windows og AppImage- eller .deb-filen til Linux sammen med et manifest til automatisk opdatering, latest.yml (eller latest-mac.yml).

Appikoner

Electron-apps skal have ikoner i platformspecifikke formater: en 512x512 PNG-fil til Linux, en ICNS-fil (i flere opløsninger) til macOS og en ICO-fil (i flere opløsninger) til Windows. electron-builder kan generere alle formater ud fra en enkelt PNG-fil på 1024x1024 med flaget --icon.

Automatisk opdatering med electron-updater

Pakken electron-updater integreres med electron-builder for at levere automatiske opdateringer. Udgiv dine builds på GitHub Releases eller S3, så kan electron-updater søge efter opdateringer ved opstart, hente deltaopdateringen i baggrunden og bede brugeren om at genstarte.

Søg efter opdateringer ved opstart

Kald autoUpdater.checkForUpdatesAndNotify() i main.js, når appen er klar. electron-updater henter manifestet latest.yml fra dit udgivelsesmål, sammenligner versionerne og henter en tilgængelig opdatering. Derefter viser den en systemnotifikation, når opdateringen er klar til installation.

ASAR-arkivet

electron-builder samler din apps JavaScript-filer i et enkelt ASAR-arkiv (svarende til en tar-fil) til distribution. Det forbedrer opstartshastigheden ved at reducere antallet af opslag i filsystemet og gør det sværere, men ikke umuligt, at inspicere din kildekode direkte.

Udpakning af native moduler fra ASAR

Native Node.js-moduler (.node-filer) kan ikke indlæses fra et ASAR-arkiv — de skal pakkes ud til filsystemet. Konfigurer asarUnpack i electron-builder for at angive mønstre for native moduler. Så placeres de i mappen app.asar.unpacked ved siden af arkivet.

Krav om notarisering til macOS

Hvorfor kræves notarisering til distribution på macOS ud over selve kodesigneringen?

Opsummering af lektionen

Distribution af en Electron-app indebærer konfiguration af electron-builder-mål, signering af koden til både macOS (med notarisering) og Windows (Authenticode) samt eventuelt opsætning af automatiske opdateringer med electron-updater. ASAR-arkivet samler appen til distribution, mens native moduler pakkes ud separat. En solid CI/CD-pipeline håndterer automatisk disse trin for hver platform.

Gratis at komme i gang

Lær React med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
88
Lektioner
324

Ofte stillede spørgsmål

Er lektionen “Pakning og distribution til desktopplatforme” gratis?

Ja — hele teksten til “Pakning og distribution til desktopplatforme” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Pakning og distribution til desktopplatforme”?

Byg installationsprogrammer til macOS, Windows og Linux med electron-builder, kodesignering og automatisk opdatering. Du øver dig i React Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Academy?

Der kræves ingen tidligere erfaring. React Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Pakning og distribution til desktopplatforme”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Academy-lektion?

Ja. Alle React Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Electron-arkitektur: Main- og renderer-processer
  2. Opsætning af React med Electron
  3. IPC-kommunikation mellem processer
  4. Pakning og distribution til desktopplatforme
← Tilbage til React Academy