Mengemas Aplikasi Electron Anda untuk Distribusi

Panduan ini menunjukkan kepada Anda cara membuat paket MSIX untuk mendistribusikan aplikasi Electron Anda dengan API Windows.

Prasyarat

Sebelum pengemasan, pastikan Anda telah:

Menyelesaikan penyiapan lingkungan pengembangan
[OPSIONAL] Membuat dan menguji addon Anda (misalnya, addon Phi Silica atau addon WinML)
Memverifikasi aplikasi Anda berjalan dengan benar dengan npm start

Bersiap untuk Pengemasan

Konfigurasikan Electron Forge untuk mengecualikan file sementara dari build akhir. Tambahkan array ignore ke packagerConfig dalam forge.config.js:

module.exports = {
  packagerConfig: {
    asar: true,
    ignore: [
      /^\/\.winapp\/(?!bindings($|\/))/, // SDK files except generated JS bindings
      /^\/winapp\.yaml$/,       // SDK config
      /\.pfx$/,                 // Certificate files
      /\.pdb$/,                 // Debug symbols
      /\/obj($|\/)/,            // C# build artifacts
      /\/bin($|\/)/,            // C# build artifacts
      /\.msix$/                 // MSIX packages
    ]
  },
  // ... rest of your config
};

Direktori .winapp/bindings yang dihasilkan harus tetap ada dalam aplikasi yang dipaketkan karena #winapp/bindings merujuk ke direktori tersebut melalui peta package.json#imports aplikasi.

Penting

Pastikan Package.appxmanifest Anda sesuai dengan struktur aplikasi terkemas Anda:

Atribut Executable harus menunjuk ke file .exe yang benar dalam output kemasan Anda

Membuat Sertifikat Pengembangan

Sebelum membuat paket MSIX yang ditandatangani, buat sertifikat pengembangan:

npx winapp cert generate

Ini membuat devcert.pfx file di akar proyek Anda yang akan digunakan untuk menandatangani paket MSIX.

Opsi Pengemasan

Anda memiliki dua opsi untuk membuat paket MSIX untuk aplikasi Electron Anda:

Opsi 1: Menggunakan CLI winapp secara langsung - Lebih dapat dikonfigurasi, berfungsi dengan paket apa pun
Opsi 2: Menggunakan Electron Forge MSIX Maker - Lebih terintegrasi ke dalam alur kerja Forge

Pilih opsi yang paling sesuai dengan alur kerja Anda.

Opsi 1: Menggunakan CLI winapp secara langsung (Direkomendasikan untuk fleksibilitas)

Pendekatan ini memberi Anda lebih banyak kontrol atas proses pengemasan dan bekerja dengan pengemas Electron apa pun.

Bangun Aplikasi Electron Anda

Untuk mengemas aplikasi Electron Anda dengan MSIX, kita perlu terlebih dahulu membuat tata letak produksi. Dengan Electron Forge, kita dapat menggunakan perintah paket:

# Package with Electron Forge (or your preferred packager)
npx electron-forge package

Ini akan membuat versi produksi aplikasi Anda di ./out/ folder . Nama folder yang tepat akan bergantung pada nama dan arsitektur aplikasi Anda (misalnya, my-windows-app-win32-x64).

Membuat Paket MSIX

Sekarang gunakan winapp CLI untuk membuat dan menandatangani paket MSIX dari aplikasi paket Anda:

npx winapp pack .\out\<your-app-folder> --output .\out --cert .\devcert.pfx --manifest .\Package.appxmanifest

Ganti <your-app-folder> dengan nama folder aktual yang dibuat oleh Electron Forge (misalnya, my-windows-app-win32-x64 untuk x64 atau my-windows-app-win32-arm64 untuk ARM64).

Opsi --manifest ini bersifat opsional. Jika tidak disediakan, itu akan mencari Package.appxmanifest dalam folder yang sedang dikemas, atau di direktori saat ini.

Opsi --cert ini juga opsional. Jika tidak disediakan, msix tidak akan ditandatangani.

Opsi --output ini juga opsional. Jika tidak disediakan, direktori saat ini akan digunakan.

Paket MSIX akan dibuat sebagai ./out/<your-app-name>.msix.

Tip

Anda dapat menambahkan perintah ini ke skrip Anda package.json untuk kenyamanan:

{
  "scripts": {
    "package-msix": "npm run build-csAddon && npx electron-forge package && npx winapp pack ./out/my-windows-app-win32-x64 --output ./out --cert ./devcert.pfx --manifest Package.appxmanifest"
  }
}

Pastikan untuk memperbarui jalur agar sesuai dengan nama folder output Anda yang sebenarnya.

Opsi 2: Menggunakan Electron Forge MSIX Maker (untuk pengguna Forge)

Jika Anda sudah menggunakan Electron Forge, Anda dapat mengintegrasikan kemasan MSIX langsung ke alur kerja Forge menggunakan alat pembuat @electron-forge/maker-msix.

Menginstal MSIX Maker

npm install --save-dev @electron-forge/maker-msix

Mengonfigurasi forge.config.js

Tambahkan pembuat MSIX ke forge.config.js:

module.exports = {
  // ... other config
  makers: [
    {
      name: '@electron-forge/maker-msix',
      config: {
        appManifest: '.\\Package.appxmanifest',
        windowsSignOptions: {
          certificateFile: '.\\devcert.pfx',
          certificatePassword: 'password'
        }
      }
    }
  ],
  // ... rest of your config
};

Perbarui Package.appxmanifest

Pembuat Electron Forge MSIX menggunakan tata letak folder yang berbeda dari pendekatan CLI winapp. Ini menempatkan aplikasi Anda di dalam app\ folder di MSIX. Folder ini dibuat secara otomatis selama pengemasan — Anda tidak perlu membuatnya sendiri. Perbarui jalur Executable di Package.appxmanifest Anda untuk menunjuk ke folder app:

<Applications>
  <Application Id="myApp"
    Executable="app\my-app.exe"
    EntryPoint="Windows.FullTrustApplication">
    <!-- ... rest of your application config -->
  </Application>
</Applications>

Ganti my-app.exe dengan nama executable Anda yang sebenarnya. Ini didasarkan pada bidang productName (atau name) di package.json anda.

Note

Pembuat Forge MSIX mencari alat SDK Windows berdasarkan MinVersion di Package.appxmanifest Anda. Jika Anda mendapatkan kesalahan tentang WindowsKit tidak ditemukan, pastikan versi SDK yang ditentukan di MinVersion diinstal pada komputer Anda, atau perbarui MinVersion agar sesuai dengan versi SDK yang diinstal.

Membuat Paket MSIX

Sekarang Anda dapat membuat paket MSIX. Gunakan --targets bendera untuk menjalankan hanya pembuat MSIX (jika tidak, Forge akan menjalankan semua pembuat yang dikonfigurasi):

npx electron-forge make --targets @electron-forge/maker-msix

Paket MSIX akan dibuat di ./out/make/msix/<arch>/ folder (misalnya, ./out/make/msix/arm64/ atau ./out/make/msix/x64/).

Tip

Pendekatan ini lebih terintegrasi dengan alur kerja Electron Forge dan secara otomatis menangani pengemasan dan pembuatan MSIX dalam satu langkah.

Menginstal dan Menguji MSIX

Pertama, instal sertifikat pengembangan (penyiapan satu kali):

# Run as Administrator:
npx winapp cert install .\devcert.pfx

Sekarang instal paket MSIX. Klik dua kali file msix atau jalankan perintah berikut:

# Option 1 output:
Add-AppxPackage .\out\<your-app-name>.msix

# Option 2 output:
Add-AppxPackage .\out\make\msix\<arch>\<your-app-name>.msix

Ganti <your-app-name> dan <arch> dengan nilai aktual dari output build Anda.

Aplikasi Anda akan muncul di Menu Mulai! Luncurkan dan uji fitur API Windows Anda.

Opsi Distribusi

Setelah memiliki paket MSIX yang berfungsi, Anda memiliki beberapa opsi untuk mendistribusikan aplikasi Anda:

Unduhan Langsung

Host paket MSIX di situs web Anda untuk diunduh langsung. Pastikan Anda menandatanganinya dengan sertifikat penandatanganan kode dari otoritas sertifikat tepercaya (CA) sehingga pengguna dapat menginstalnya tanpa peringatan keamanan.

Bursa Microsoft

Kirimkan aplikasi Anda ke Microsoft Store untuk distribusi terluas dan pembaruan otomatis. Anda perlu:

Membuat akun Pusat Mitra Microsoft
Pesan nama aplikasi Anda
Perbarui Package.appxmanifest dengan identitas Toko Anda. Tidak perlu menandatangani msix, proses penerbitan toko akan menandatanganinya secara otomatis.
Kirim untuk sertifikasi

Pelajari lebih lanjut: Publish aplikasi Anda ke Microsoft Store

Distribusi Perusahaan

Distribusikan langsung ke pelanggan perusahaan melalui:

Company Portal - Untuk organisasi yang menggunakan Intune
Unduhan Langsung - Host MSIX di situs web Anda
Sideloading - Instal melalui PowerShell atau Penginstal Aplikasi

Pelajari lebih lanjut: Mendistribusikan aplikasi di luar Toko

Penginstal Aplikasi

Buat .appinstaller file untuk pembaruan otomatis:

<?xml version="1.0" encoding="utf-8"?>
<AppInstaller
    Uri="https://your-domain.com/packages/myapp.appinstaller"
    Version="1.0.0.0"
    xmlns="http://schemas.microsoft.com/appx/appinstaller/2017/2">
    <MainPackage
        Name="YourAppName"
        Version="1.0.0.0"
        Publisher="CN=YourPublisher"
        Uri="https://your-domain.com/packages/myapp.msix"
        ProcessorArchitecture="x64" />
    <UpdateSettings>
        <OnLaunch HoursBetweenUpdateChecks="24" />
    </UpdateSettings>
</AppInstaller>

Pelajari selengkapnya: Gambaran umum file Penginstal Aplikasi

Langkah Selanjutnya

Selamat! Anda berhasil mengemas aplikasi Electron dengan dukungan Windows untuk didistribusikan! 🎉

Sumber Daya Tambahan

Dokumentasi CLI winapp - Referensi CLI lengkap
Contoh Aplikasi Elektron - Contoh kerja lengkap
Dokumentasi Kemasan MSIX - Pelajari selengkapnya tentang MSIX
Windows App Certification Kit - Uji aplikasi Anda sebelum pengiriman Store

Kembali ke Gambaran Umum

Ikhtisar Memulai - Kembali ke panduan utama
Menyiapkan Lingkungan Pengembangan - Tinjau langkah-langkah penyiapan
Membuat Addon Phi Silica - Tinjau pembuatan addon
Membuat WinML Addon - Pelajari tentang integrasi WinML

Mendapatkan Bantuan

Menemukan bug?Mengajukan masalah

Selamat mendistribusikan! 🚀

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2026-07-23

Mengemas Aplikasi Electron Anda untuk Distribusi

Prasyarat

Bersiap untuk Pengemasan

Membuat Sertifikat Pengembangan

Opsi Pengemasan

Opsi 1: Menggunakan CLI winapp secara langsung (Direkomendasikan untuk fleksibilitas)

Bangun Aplikasi Electron Anda

Membuat Paket MSIX

Opsi 2: Menggunakan Electron Forge MSIX Maker (untuk pengguna Forge)

Menginstal MSIX Maker

Mengonfigurasi forge.config.js

Perbarui Package.appxmanifest

Membuat Paket MSIX

Menginstal dan Menguji MSIX

Opsi Distribusi

Unduhan Langsung

Bursa Microsoft

Distribusi Perusahaan

Penginstal Aplikasi

Langkah Selanjutnya

Sumber Daya Tambahan

Kembali ke Gambaran Umum

Mendapatkan Bantuan

Saran dan Komentar

Sumber Daya Tambahan: