Muat semula panas dalam ElectronJs

Muat semula panas ialah ciri berkuasa dalam ElectronJS yang membolehkan pembangun melihat perubahan kod dengan cepat dalam masa nyata tanpa memulakan semula aplikasi. Ia menjadikan proses pembangunan lebih pantas dan lebih cekap dengan mengurangkan masa dan usaha yang diperlukan untuk menguji perubahan.

Langkah untuk melaksanakan muat semula panas dalam ElectronJS

Ciri tambah nilai panas dilaksanakan menggunakan perpustakaan yang dipanggil "Electron-Reload", yang boleh disepadukan dengan mudah ke dalam aplikasi Electron JS dalam beberapa langkah mudah. Pengguna boleh mengikuti langkah di bawah untuk melaksanakan pemuatan semula panas dalam Electron Js -

Pasang modul tambah nilai elektronik

Langkah pertama untuk melaksanakan muat semula panas dalam Electron JS ialah memasang modul tambah semula elektro. Pengguna boleh memasangnya menggunakan npm seperti yang ditunjukkan di bawah -

npm install electron-reload 

Muat semula elektron diperlukan dalam proses utama

Setelah modul tambah nilai elektron dipasang, kami perlu menggunakannya dalam proses utama aplikasi elektron kami. Kita boleh melakukan ini dengan menambahkan kod berikut pada fail main.js -

const electronReload = require('electron-reload');
electronReload(__dirname);

Muat semula proses pemapar

Langkah terakhir ialah memuatkan semula proses pemapar apabila kod kami berubah. Kita boleh melakukannya dengan menambahkan kod berikut pada fail renderer.js -

if (module.hot) {
   module.hot.accept();
}

Pilihan penggunaan dan penyesuaian lanjutan untuk muat semula panas

Muat semula panas dalam Elektron mudah disediakan, tetapi modul Muat Semula Elektron menyediakan pilihan tambahan seperti mengabaikan fail dan folder tertentu dan mengecualikan modul tertentu daripada memuat semula.

Fungsi penting untuk melaksanakan muat semula panas dalam ElectronJS

Dalam muat semula panas, terdapat beberapa fungsi penting yang perlu diketahui untuk melaksanakannya dalam aplikasi Elektron kami -

module.hot.accept() - Fungsi ini digunakan dalam proses pemapar untuk membolehkan muat semula panas proses pemapar. Apabila kod proses pemapar berubah, proses pemapar akan dimuat semula secara automatik dan perubahan akan ditunjukkan dalam aplikasi dalam masa nyata.

ElectronReload(__dirname) - Fungsi ini digunakan dalam proses utama untuk membolehkan muat semula panas proses utama. Setiap kali kod berubah, ia memuatkan semula proses utama, membolehkan kami melihat kesan perubahan dalam masa nyata.

app.on('ready', () => {...}) - Pengendali acara ini dipanggil apabila aplikasi Electron sedia untuk dipaparkan kepada pengguna. Ia biasanya digunakan untuk mencipta tetingkap utama dan memuatkan fail HTML awal.

BrowserWindow - Kelas ini digunakan untuk mencipta tetingkap baharu dalam aplikasi Electron. Dalam proses utama, kita boleh mencipta contoh BrowserWindow dan menetapkan pelbagai pilihan, seperti saiz dan pilihan web, untuk menyesuaikan penampilan dan tingkah laku setiap tetingkap.

Fungsi ini adalah kunci untuk memahami cara muat semula panas berfungsi dalam Electron JS, dan digunakan dalam contoh yang disediakan sebelum ini dalam tutorial ini. Dengan memahami cara menggunakan fungsi ini, kami boleh melaksanakan muat semula panas dalam aplikasi Elektron dan membuat perubahan pada proses utama dan pemapar dalam masa nyata.

Contoh

Dalam contoh ini, mula-mula kami mencipta aplikasi ElectronJS baharu menggunakan modul electro.app dan menggunakan kaedah on untuk mendaftarkan fungsi panggil balik yang menyala apabila aplikasi sudah sedia. Dalam fungsi panggil balik ini, kami mencipta tetingkap penyemak imbas baharu menggunakan modul Electron.BrowserWindow dan memuatkan fail index.html ke dalamnya.

Seterusnya, dalam fail renderer.js, kami menggunakan sifat module.hot untuk mendayakan muat semula panas dalam proses pemapar. Dengan cara ini, jika kami membuat sebarang perubahan pada fail renderer.js, kod yang dikemas kini akan dimuat semula secara automatik.

Akhir sekali, kami menggunakan console.log untuk log mesej "Hello World!"

Fail index.html ialah fail HTML ringkas yang memaparkan tajuk dan perenggan serta berfungsi sebagai UI aplikasi.

main.js

// main.js 
const { app, BrowserWindow } = require('electron');
const electronReload = require('electron-reload');
electronReload(__dirname);
let win;
app.on('ready', () => {
   win = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
         nodeIntegration: true
      }
   });
   win.loadFile('index.html');
}); 

renderer.js

// renderer.js
if (module.hot) {
   module.hot.accept();
}
document.getElementById('root').innerHTML = 'Hello, Hot Reloading!'; 

index.html

<html lang = "en" >
<head>
   <title> Electorn Js </title>
</head>
<body> 
   <h2> Hot Reload in ElectornJs </h2>
   <p> With hot reloading enabled, any changes made to the code in the "main.js" or "renderer.js" files will be reflected in the application in real-time without requiring a full restart of the application. </p>
</body>
 </html>

Contoh

Dalam contoh ini, aplikasi ElectronJs disediakan untuk mencipta tetingkap baharu apabila acara "sedia" dicetuskan dan tetingkap memuatkan fail index.html.

Fail "renderer.js" mengandungi pernyataan muat semula modul panas (HMR) yang memuatkan semula proses pemapar apabila kod berubah. Ia juga log "Hello World!"

Fail "index.html" memaparkan tajuk dan perenggan yang menunjukkan bahawa muat semula panas didayakan.

main.js

// main.js
const electron = require('electron');
const electronReload = require('electron-reload');
electronReload(__dirname);
const app = electron.app;
app.on('ready', createWindow);

function createWindow () {
   
   // Create the browser window.
   const win = new electron.BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
         nodeIntegration: true
      }
   })

   // and load the index.html of the app.
   win.loadFile('index.html')
} 

renderer.js

// renderer.js
if (module.hot) {
   module.hot.accept();
}
console.log('Hello World!');

index.html

<html>
<head>
   <title> Electorn Js </title>
</head>
<body>
   <h2> Hot Reload Enabled </h2>
   <p> Hot reloading allows for a faster development experience as we can see the effects of our changes immediately. </p>
</body>
</html>

Dalam tutorial ini, pengguna mengetahui tentang ciri tambah nilai panas dalam ElectronJS dan cara ia menjadikan proses pembangunan lebih pantas dan cekap dengan membenarkan pembangun melihat kesan perubahan kod dalam masa nyata tanpa memulakan semula keseluruhan aplikasi.

Pengguna juga mengetahui tentang fungsi dan langkah utama untuk melaksanakan muat semula panas dalam ElectronJS, seperti memerlukan modul muat semula Elektron dalam proses utama, memuat semula proses pemapar dan memahami modul.hot.accept(dll. fungsi)), electronReload (__dirname) , app.on('ready', () => {...}) dan BrowserWindow. Dengan mengikuti langkah ini dan memahami ciri utama ini, pengguna boleh melaksanakan muat semula panas dalam aplikasi ElectronJS kami dan membuat perubahan pada proses utama dan pemapar dalam masa nyata.

Atas ialah kandungan terperinci Muat semula panas dalam ElectronJs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!