Electron-työpöytäsovellusten kehitys · Oppitunti

Electron-sovelluksen paketointi

Tutustukaa Electron-sovelluksen paketointiin eri käyttöjärjestelmissä (Windows, macOS, Linux) tapahtuvaa jakelua varten käyttämällä esimerkiksi `electron-builder`-työkalua.

Oppitunti 3/412 vaihetta

Electron-sovelluksen paketointi on ilmainen Electron-työpöytäsovellusten kehitys-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Electron-työpöytäsovellusten kehitys-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Electron-työpöytäsovellusten kehitys-kurssilla on yhteensä 4 oppituntia.

Miksi sovellus paketoidaan?

Kun kehitätte Electron-sovellusta, se toimii Node.js:n ja Chromen avulla. Käyttäjillänne ei kuitenkaan ole välttämättä Node.js:ää asennettuna, eivätkä he välttämättä tiedä, miten kehitystiedostojanne käytetään.

Sovelluksen paketointi tarkoittaa kaikkien sen tarvitsemien tiedostojen – koodin, Electron-ajoympäristön ja resurssien – kokoamista yhdeksi helposti jaeltavaksi suoritettavaksi tiedostoksi tai asennusohjelmaksi, kuten Windowsin .exe-tiedostoksi tai macOS:n .dmg-tiedostoksi.

Tutustu Electron Builderiin

electron-builder on suosituin ja monipuolisin ratkaisu Electron-sovellusten paketointiin ja jakeluun. Se yksinkertaistaa sovelluksen valmistelemista eri käyttöjärjestelmiä varten.

Monialustaisuus: Koontiversion voi luoda Windowsille, macOS:lle ja Linuxille yhdestä koodikannasta.
Asennusohjelmat: Luo alustakohtaisia asennusohjelmia, kuten NSIS-asennusohjelman Windowsille ja DMG-tiedoston macOS:lle.
Automaattiset päivitykset: Integroituu saumattomasti automaattisten päivitysten mekanismeihin.
Mukauttaminen: Tarjoaa runsaasti asetuksia kuvakkeille, tuotenimille ja muille ominaisuuksille.

Electron Builderin asentaminen

Ensin electron-builder on lisättävä projektin kehitysriippuvuudeksi. Avatkaa pääte projektin juurihakemistossa ja suorittakaa:

npm install --save-dev electron-builder

Projektin perusasetukset

Varmistakaa ennen paketointia, että package.json on määritetty oikein. Se sisältää sovelluksen perustiedot ja aloituspisteen. Tässä on minimaalinen esimerkki:

name: Sovelluksen yksilöllinen tunniste.
version: Nykyinen versio.
main: Polku Electronin pääkomentosarjaan.
scripts.start: Komento, jolla sovellus suoritetaan kehitystilassa.

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

package.json-tiedoston määrittäminen koontia varten

Lisätään nyt build-määritys tiedostoon package.json. Tämä lohko kertoo electron-builder-työkalulle, miten sovellus paketoidaan.

appId: Sovelluksen yksilöllinen tunniste, kuten com.yourcompany.yourapp.
productName: Nimi, jonka käyttäjät näkevät sovellukselle.
directories.output: Sijainti, johon paketoidut tiedostot tallennetaan, yleensä dist.
scripts.build: Koontiversion käynnistävä komento.

{
  "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"
    }
  }
}

Koontiversion luominen Windowsille

Windowsia varten electron-builder voi luoda erilaisia kohteita. Yleisimmät ovat nsis (Nullsoft Scriptable Install System) tavalliselle asennusohjelmalle ja portable yksittäiselle suoritettavalle tiedostolle, joka ei vaadi asennusta.

Kohteen voi määrittää koontikomentoa suoritettaessa:

npm run build -- --win nsis

Koontiversion luominen macOS:lle

macOS:ssä yleisiä jakelumuotoja ovat dmg (Disk Image) ohjattua asennusta varten ja zip .app-paketin sisältävälle suoraan jaettavalle arkistolle.

macOS-sovelluksille on myös hyvä käytäntö määrittää category.

npm run build -- --mac dmg

Koontiversion luominen Linuxille

Linux tarjoaa useita paketointimuotoja eri jakeluita varten:

deb: Debian-pohjaisille järjestelmille, kuten Ubuntulle.
rpm: Red Hat -pohjaisille järjestelmille, kuten Fedoralle.
AppImage: Yleiskäyttöinen muoto, joka toimii useimmissa Linux-jakeluissa.

Näin luotte AppImage-paketin:

npm run build -- --linux AppImage

Kuvakkeiden mukauttaminen

Mukautettu sovelluskuvake on tärkeä osa brändin tunnistettavuutta. Voitte määrittää yhden kuvakepolun tiedoston package.json build-osiossa. electron-builder luo automaattisesti erikokoiset kuvakkeet eri alustoja varten.

Suosittelemme sijoittamaan pääkuvakkeen, kuten .png-tiedoston, projektin juurihakemiston build-hakemistoon.

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

Suorittakaa koonti!

Kun package.json on määritetty, koontikomennon suorittaminen on helppoa. Komento käynnistää paketointiprosessin, joka voi kestää muutaman minuutin projektin koon ja internetyhteyden nopeuden mukaan, koska Electronin binääritiedostot ladataan.

Kun prosessi on valmis, löydätte paketoidut sovellustiedostot dist-hakemistosta.

npm run build

Paketoinnin ominaisuuksien tietovisa

Mitkä näistä ovat päteviä syitä käyttää electron-builder-työkalua Electron-sovelluksen paketointiin?

Vastaa interaktiivisessa oppitunnissa

Kertaus: valmis jakeluun

Olette oppineet Electron-sovelluksen paketoinnin perusteet!

Paketointi kokoaa sovelluksen jaeltavaan muotoon.
electron-builder on ensisijainen työkalu monialustaiseen paketointiin.
Asetukset määritetään tiedostossa package.json, jossa määritellään sovelluksen metatiedot ja koontikohteet.
Voitte luoda asennusohjelmia Windowsille (nsis), macOS:lle (dmg) ja Linuxin eri muodoissa (AppImage, deb, rpm).

Nyt sovelluksenne on valmis jaettavaksi maailmalle!

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 12
Oppitunnit: 47

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Electron-sovelluksen paketointi” ilmainen?

Kyllä – oppitunnin ”Electron-sovelluksen paketointi” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Electron-työpöytäsovellusten kehitys-kurssin, päivitä CoddyKit PROhon. Electron-työpöytäsovellusten kehitys-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Electron-sovelluksen paketointi”?

Tutustukaa Electron-sovelluksen paketointiin eri käyttöjärjestelmissä (Windows, macOS, Linux) tapahtuvaa jakelua varten käyttämällä esimerkiksi `electron-builder`-työkalua. Harjoittelet Electron-työpöytäsovellusten kehitys-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Electron-työpöytäsovellusten kehitys-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Electron-työpöytäsovellusten kehitys-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Electron-sovelluksen paketointi”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Electron-työpöytäsovellusten kehitys-oppitunnilla?

Kyllä. Jokainen Electron-työpöytäsovellusten kehitys-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Electron-työpöytäsovellusten kehitys