Electron Uygulamanızı Paketleme
`electron-builder` gibi araçları kullanarak Electron uygulamanızı farklı işletim sistemlerinde (Windows, macOS, Linux) dağıtım için paketlemeyi keşfedin.
Electron Uygulamanızı Paketleme, CoddyKit'te ücretsiz bir Electron Desktop App Development dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Electron Desktop App Development öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Electron Desktop App Development kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
Why Package Your App?
When you develop an Electron app, it runs using Node.js and Chromium. However, your users won't have Node.js installed or know how to run your development files.
Packaging your application means bundling all its necessary files—your code, Electron runtime, and any assets—into a single, easy-to-distribute executable file or installer, like a .exe for Windows or a .dmg for macOS.
Meet Electron Builder
electron-builder is the most popular and robust solution for packaging and distributing Electron applications. It simplifies the complex process of preparing your app for various operating systems.
- Cross-Platform: Build for Windows, macOS, and Linux from a single codebase.
- Installers: Generate platform-specific installers (e.g., NSIS for Windows, DMG for macOS).
- Auto-Updates: Integrates seamlessly with auto-update mechanisms.
- Customization: Offers extensive options for icons, product names, and more.
Installing Electron Builder
First, you need to add electron-builder as a development dependency to your project. Open your terminal in your project's root directory and run:
npm install --save-dev electron-builderBasic Project Setup
Before packaging, ensure your package.json is correctly set up. It defines your application's basic information and entry point. Here's a minimal example:
name: Your app's unique identifier.version: Current version.main: Path to your main Electron script.scripts.start: Command to run your app in development.
{
"name": "my-electron-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}Configure package.json for Build
Now, let's add the build configuration to your package.json. This block tells electron-builder how to package your app.
appId: A unique identifier for your app (e.g.,com.yourcompany.yourapp).productName: The name users will see for your app.directories.output: Where the packaged files will be saved (commonlydist).scripts.build: The command to trigger the build.
{
"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"
}
}
}Building for Windows
For Windows, electron-builder can create various targets. The most common are nsis (Nullsoft Scriptable Install System) for a standard installer, or portable for a single executable that doesn't require installation.
You can specify the target when running the build command:
npm run build -- --win nsisBuilding for macOS
On macOS, typical distribution formats include dmg (Disk Image) for a guided installation, or zip for a direct archive of the .app bundle.
It's also good practice to specify a category for macOS apps.
npm run build -- --mac dmgBuilding for Linux
Linux offers several packaging formats to cater to different distributions:
deb: For Debian-based systems (like Ubuntu).rpm: For Red Hat-based systems (like Fedora).AppImage: A universal format that runs on most Linux distributions.
Here's how to build an AppImage:
npm run build -- --linux AppImageCustomizing with Icons
A custom application icon is essential for brand recognition. You can specify a single icon path in your package.json's build section. electron-builder will automatically generate different sizes for various platforms.
It's recommended to place your main icon (e.g., a .png) in a build directory in your project root.
{
"build": {
"appId": "com.yourcompany.yourapp",
"productName": "My Awesome App",
"directories": {
"output": "dist"
},
"icon": "build/icon.png"
}
}Run Your Build!
With your package.json configured, executing the build command is straightforward. This command will start the packaging process, which might take a few minutes depending on your project size and internet speed (to download Electron binaries).
Once complete, you'll find your packaged application files in the dist directory.
npm run buildPackaging Features Quiz
Which of these are valid reasons to use electron-builder for packaging your Electron app?
Recap: Ready for Distribution
You've learned the essentials of packaging your Electron application!
- Packaging bundles your app into a distributable format.
electron-builderis the go-to tool for cross-platform packaging.- Configuration happens in
package.json, defining app metadata and build targets. - You can create installers for Windows (
nsis), macOS (dmg), and various Linux formats (AppImage,deb,rpm).
Now your app is ready to be shared with the world!
Yapay zeka eğitmeniyle JavaScript öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 12
- Dersler
- 47
Sıkça Sorulan Sorular
“Electron Uygulamanızı Paketleme” dersi ücretsiz mi?
Evet — “Electron Uygulamanızı Paketleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Electron Desktop App Development kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Electron Desktop App Development kursu toplamda 4 dersten oluşur.
“Electron Uygulamanızı Paketleme” dersinde ne öğreneceğim?
`electron-builder` gibi araçları kullanarak Electron uygulamanızı farklı işletim sistemlerinde (Windows, macOS, Linux) dağıtım için paketlemeyi keşfedin. Electron Desktop App Development ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Electron Desktop App Development öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Electron Desktop App Development, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Electron Uygulamanızı Paketleme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Electron Desktop App Development dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Electron Desktop App Development dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Ana ve İşleyici Süreç
- Süreçler Arası İletişim (IPC)
- Electron Uygulamanızı Paketleme
- Birden Çok Pencereyi Yönetme