Menyediakan React dengan Electron

Persediaan React dengan Electron bermula dengan mencipta projek React Vite, kemudian menambahkan electron dan electron-builder sebagai devDependencies. Projek ini akhirnya mempunyai dua titik masuk: aplikasi Vite untuk pemapar dan fail main.js untuk proses utama Electron.

main.js ialah titik masuk Electron. Fail ini mencipta BrowserWindow dengan dimensi tetingkap dan tetapan keselamatan yang Anda kehendaki, kemudian memuatkan aplikasi React — dengan menunjuk kepada localhost:5173 semasa pembangunan dan kepada laluan fail binaan semasa pengeluaran.

electron-vite ialah alat binaan semua-dalam-satu yang mengintegrasikan Vite dengan Electron dan mengendalikan konfigurasi binaan berbilang proses yang kompleks secara automatik. Alat ini menyediakan konfigurasi Vite berasingan untuk proses utama, pramuat dan pemapar, serta memudahkan binaan pembangunan dan pengeluaran dengan ketara.

Apabila mengkonfigurasi Vite untuk Electron, Anda mesti menetapkan sasaran pelayar secara eksplisit dan bukannya bergantung pada pengesanan automatik, kerana pemapar berjalan pada versi Chromium tertentu yang disertakan bersama Electron. electron-vite mengendalikan perkara ini secara automatik, tetapi persediaan manual memerlukan versi chrome dinyatakan dalam sasaran binaan.

Menjalankan electron-vite dev memulakan pelayan pembangunan Vite untuk pemapar dan proses utama Electron secara serentak. Pelayan pembangunan Vite menyediakan Penggantian Modul Panas, jadi perubahan pada komponen React Anda muncul serta-merta dalam tetingkap Electron tanpa dimulakan semula sepenuhnya.

HMR berfungsi dalam pemapar Electron sama seperti dalam pelayar — komponen yang diedit dipaparkan semula serta-merta sambil mengekalkan keadaan. Hanya perubahan pada main.js atau skrip pramuat memerlukan Electron dimulakan semula sepenuhnya, kerana kedua-duanya berjalan di luar sempadan HMR Vite.

Projek Electron + React + TypeScript memerlukan fail tsconfig berasingan untuk proses utama (menyasarkan Node.js/CommonJS), pramuat (menyasarkan persekitaran seperti pelayar dengan global Node) dan pemapar (TypeScript pelayar standard). electron-vite menjana konfigurasi ini secara automatik.

Skrip pramuat menggunakan contextBridge.exposeInMainWorld untuk mendedahkan API tersuai Anda kepada pemapar. Corak biasa ialah mendedahkan ruang nama seperti "api" dengan fungsi yang membalut panggilan ipcRenderer.invoke, lalu memberikan komponen React antara muka tak segerak yang kemas untuk operasi proses utama.

Daripada mana-mana komponen React, Anda memanggil window.api.myFunction() untuk menggunakan API pramuat yang didedahkan. Pengguna TypeScript biasanya menambahkan pengisytiharan global (window: Window & { api: MyAPI }) supaya mereka mendapat pemeriksaan jenis dan pelengkapan automatik untuk antara muka yang didedahkan.

electron-vite build menyusun ketiga-tiga sasaran (utama, pramuat, pemapar) ke dalam folder dist/. Kemudian electron-builder membungkusnya menjadi pemasang khusus platform. main.js pengeluaran memuatkan pemapar daripada laluan fail yang dibungkus dan bukannya URL pelayan pembangunan.

Kesilapan persediaan yang paling kerap berlaku ialah: terlupa menetapkan nodeIntegration:false dan contextIsolation:true (yang mewujudkan kelemahan keselamatan), memuatkan URL yang salah dalam main.js (pembangunan berbanding pengeluaran), dan mengimport modul Electron secara terus dalam pemapar (yang menyebabkan ranap). Lalai electron-vite menghalang kebanyakan masalah ini.

Persediaan React dengan Electron dipermudah oleh electron-vite, yang mengendalikan kerumitan binaan berbilang proses. Aliran kerja pembangunan menyediakan sokongan HMR penuh, contextBridge melindungi permukaan API pemapar, dan konfigurasi TypeScript berasingan memastikan setiap proses mempunyai persekitaran jenis yang betul. Binaan pengeluaran menggunakan electron-builder untuk pembungkusan khusus platform.