Utvikling av Electron-skrivebordsapper · leksjon

Pakke Electron-appen Deres

Oppdag hvordan De kan pakke Electron-applikasjonen Deres for distribusjon på ulike operativsystemer (Windows, macOS, Linux) ved hjelp av verktøy som `electron-builder`.

Leksjon 3 av 412 trinn

Pakke Electron-appen Deres er en gratis leksjon i Utvikling av Electron-skrivebordsapper på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Utvikling av Electron-skrivebordsapper, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Utvikling av Electron-skrivebordsapper inneholder totalt 4 leksjoner.

Hvorfor pakke appen?

Når du utvikler en Electron-app, kjører den ved hjelp av Node.js og Chromium. Brukerne dine vil imidlertid ikke ha Node.js installert eller vite hvordan de skal kjøre utviklingsfilene dine.

Å pakke applikasjonen betyr å samle alle nødvendige filer – koden, Electron-kjøremiljøet og eventuelle ressurser – i én kjørbar fil eller installasjonspakke som er enkel å distribuere, for eksempel en .exe-fil for Windows eller en .dmg-fil for macOS.

Bli kjent med Electron Builder

electron-builder er den mest populære og robuste løsningen for pakking og distribusjon av Electron-applikasjoner. Den forenkler den komplekse prosessen med å klargjøre appen for ulike operativsystemer.

Plattformuavhengig: Bygg for Windows, macOS og Linux fra én enkelt kodebase.
Installasjonspakker: Generer plattformspesifikke installasjonspakker, for eksempel NSIS for Windows og DMG for macOS.
Automatiske oppdateringer: Integreres sømløst med mekanismer for automatiske oppdateringer.
Tilpasning: Tilbyr omfattende alternativer for ikoner, produktnavn og mer.

Installere Electron Builder

Først må du legge til electron-builder som en utviklingsavhengighet i prosjektet. Åpne terminalen i prosjektets rotmappe og kjør:

npm install --save-dev electron-builder

Grunnleggende prosjektoppsett

Før du pakker appen, må du kontrollere at package.json er riktig konfigurert. Den definerer grunnleggende informasjon om applikasjonen og startpunktet. Her er et minimalt eksempel:

name: Appens unike identifikator.
version: Gjeldende versjon.
main: Bane til hovedskriptet for Electron.
scripts.start: Kommandoen som kjører appen under utvikling.

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

Konfigurere package.json for bygging

La oss nå legge til build-konfigurasjonen i package.json. Denne blokken forteller electron-builder hvordan appen skal pakkes.

appId: En unik identifikator for appen, for eksempel com.yourcompany.yourapp.
productName: Navnet brukerne ser for appen.
directories.output: Hvor de pakkede filene skal lagres, vanligvis dist.
scripts.build: Kommandoen som starter byggingen.

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "build": {
    "appId": "com.yourcompany.yourapp",
    "productName": "My Awesome App",
    "directories": {
      "output": "dist"
    }
  }
}

Bygge for Windows

For Windows kan electron-builder opprette flere målformater. De vanligste er nsis (Nullsoft Scriptable Install System) for en standardinstallasjon, eller portable for én kjørbar fil som ikke krever installasjon.

Du kan angi målet når du kjører byggingskommandoen:

npm run build -- --win nsis

Bygge for macOS

På macOS omfatter vanlige distribusjonsformater dmg (Disk Image) for en veiledet installasjon, eller zip for et direkte arkiv av .app-pakken.

Det er også god praksis å angi en category for macOS-apper.

npm run build -- --mac dmg

Bygge for Linux

Linux tilbyr flere pakkeformater for å dekke behovene til ulike distribusjoner:

deb: For Debian-baserte systemer, som Ubuntu.
rpm: For Red Hat-baserte systemer, som Fedora.
AppImage: Et universelt format som kjører på de fleste Linux-distribusjoner.

Slik bygger du en AppImage:

npm run build -- --linux AppImage

Tilpasse med ikoner

Et tilpasset programikon er viktig for å gjøre merkevaren gjenkjennelig. Du kan angi én ikonbane i build-delen av package.json. electron-builder genererer automatisk ulike størrelser for forskjellige plattformer.

Det anbefales å plassere hovedikonet, for eksempel en .png-fil, i en build-mappe i prosjektets rotmappe.

{
  "build": {
    "appId": "com.yourcompany.yourapp",
    "productName": "My Awesome App",
    "directories": {
      "output": "dist"
    },
    "icon": "build/icon.png"
  }
}

Kjør byggingen!

Når package.json er konfigurert, er det enkelt å kjøre byggingskommandoen. Kommandoen starter pakkeprosessen, som kan ta noen minutter avhengig av prosjektets størrelse og internetthastigheten din (fordi Electron-binærfiler må lastes ned).

Når prosessen er ferdig, finner du de pakkede applikasjonsfilene i dist-mappen.

npm run build

Quiz om pakkeegenskaper

Hvilke av disse er gyldige grunner til å bruke electron-builder til å pakke Electron-appen din?

Besvar den i den interaktive leksjonen

Oppsummering: Klar for distribusjon

Du har lært det viktigste om å pakke Electron-applikasjonen din!

Pakking samler appen i et format som kan distribueres.
electron-builder er standardverktøyet for pakking på tvers av plattformer.
Konfigurasjonen gjøres i package.json, der appens metadata og byggingsmål angis.
Du kan opprette installasjonspakker for Windows (nsis), macOS (dmg) og ulike Linux-formater (AppImage, deb, rpm).

Nå er appen klar til å deles med resten av verden!

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 47

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Pakke Electron-appen Deres» gratis?

Ja – hele teksten i «Pakke Electron-appen Deres» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Utvikling av Electron-skrivebordsapper-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Utvikling av Electron-skrivebordsapper inneholder totalt 4 leksjoner.

Hva lærer jeg i «Pakke Electron-appen Deres»?

Oppdag hvordan De kan pakke Electron-applikasjonen Deres for distribusjon på ulike operativsystemer (Windows, macOS, Linux) ved hjelp av verktøy som `electron-builder`. Du øver på Utvikling av Electron-skrivebordsapper med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Utvikling av Electron-skrivebordsapper?

Ingen tidligere erfaring er nødvendig. Utvikling av Electron-skrivebordsapper på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Pakke Electron-appen Deres»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Utvikling av Electron-skrivebordsapper-leksjonen?

Ja. Alle Utvikling av Electron-skrivebordsapper-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Utvikling av Electron-skrivebordsapper