Phenquestions
Artikel ini akan merangkumi panduan mengenai pemasangan Electron dan membuat aplikasi Elektron "Hello World" yang mudah di Linux.
Mengenai Elektron
Electron adalah kerangka pengembangan aplikasi yang digunakan untuk membuat aplikasi desktop lintas platform menggunakan teknologi web dalam penyemak imbas web yang berdiri sendiri. Ia juga menyediakan API khusus sistem operasi dan sistem pembungkusan yang mantap untuk pengedaran aplikasi yang lebih mudah. Aplikasi Elektron khas memerlukan tiga perkara untuk berfungsi: Node.js runtime, penyemak imbas berasaskan Chromium mandiri yang disertakan dengan API khusus Elektron dan OS.
Pasang Node.js
Anda boleh memasang Node.js dan pengurus pakej "npm" dengan menjalankan perintah berikut di Ubuntu:
$ sudo apt memasang nodejs npmAnda boleh memasang pakej ini dalam pengedaran Linux lain dari pengurus pakej. Sebagai alternatif, muat turun binari rasmi yang terdapat di Node.laman web js.
Buat Node Baru.Projek js
Setelah anda memasang Node.js dan "npm", buat projek baru bernama "HelloWorld" dengan menjalankan perintah berikut berturut-turut:
$ mkdir HelloWorld$ cd HelloWorld
Seterusnya, jalankan terminal di direktori "HelloWorld" dan jalankan arahan di bawah untuk memulakan pakej baru:
$ npm initJelajahi wizard interaktif di terminal dan masukkan nama dan nilai yang diperlukan.
Tunggu pemasangan selesai. Anda sekarang harus mempunyai "pakej.fail json "dalam direktori" HelloWorld ". Mempunyai "pakej.fail json ”di direktori projek anda menjadikannya lebih mudah untuk mengkonfigurasi parameter projek dan menjadikan projek mudah alih untuk perkongsian yang lebih mudah.
Pakej “.fail json harus mempunyai entri seperti ini:
indeks "utama": ".js ""Indeks.js ”adalah tempat di mana semua logik untuk program utama anda berada. Anda boleh membuat tambahan ".js ",".html "dan".fail css ”mengikut keperluan anda. Untuk tujuan program "HelloWorld" yang dijelaskan dalam panduan ini, arahan di bawah akan membuat tiga fail yang diperlukan:
indeks $ sentuh.indeks js.indeks html.cssPasang Elektron
Anda boleh memasang Electron di direktori projek anda dengan menjalankan perintah di bawah:
$ npm pasang elektron --save-devTunggu pemasangan selesai. Elektron kini akan ditambahkan ke projek anda sebagai ketergantungan dan anda akan melihat folder "node_modules" di direktori projek anda. Memasang Elektron sebagai pergantungan setiap projek adalah cara yang disyorkan untuk memasang Elektron mengikut dokumentasi Elektron rasmi. Walau bagaimanapun, jika anda ingin memasang Electron secara global pada sistem anda, anda boleh menggunakan arahan yang disebutkan di bawah:
$ npm pasang elektron -gTambahkan baris berikut ke bahagian "skrip" dalam "pakej.fail json ”untuk menyelesaikan persediaan Elektron:
"mula": "elektron ."Buat Aplikasi Utama
Buka "indeks.js ”fail dalam penyunting teks pilihan anda dan tambahkan kod berikut kepadanya:
const app, BrowserWindow = memerlukan ('elektron');fungsi createWindow ()
const window = BrowserWindow baru (
lebar: 1600,
tinggi: 900,
webPreferences:
nodeIntegration: benar
);
tingkap.loadFile ('indeks'.html ');
aplikasi.bilaSedia ().kemudian (createWindow);
Buka "indeks.html ”di editor teks kegemaran anda, dan masukkan kod berikut di dalamnya:
Hai dunia !!
Kod javascript cukup jelas. Baris pertama mengimport modul Elektron yang diperlukan agar aplikasi berfungsi. Seterusnya, anda membuat tetingkap baru penyemak imbas mandiri yang disertakan dengan Electron dan memuatkan "indeks.fail html ”di dalamnya. Tanda dalam "indeks.fail html "membuat perenggan baru" Hello World !!"Dibungkus dalam"
Teg. Ini juga termasuk pautan rujukan ke "indeks.fail gaya lembaran css yang digunakan kemudian dalam artikel.
Jalankan Aplikasi Elektron Anda
Jalankan arahan di bawah untuk melancarkan aplikasi Electron anda:
permulaan $ npmSekiranya anda mengikuti arahan dengan betul setakat ini, anda harus mendapatkan tetingkap baru yang serupa dengan ini:
Buka "indeks.fail css "dan tambahkan kod di bawah ini untuk menukar warna" Hello World !!" tali.
warna: merah;
Jalankan arahan berikut sekali lagi untuk melihat gaya CSS diterapkan pada "Hello World !!" tali.
permulaan $ npm
Anda kini mempunyai sekumpulan fail minimum yang diperlukan untuk menjalankan aplikasi Elektron asas. Anda mempunyai "indeks.js "untuk menulis logik program," indeks.html "untuk menambahkan markup HTML dan" indeks.css ”untuk menggayakan pelbagai elemen. Anda juga mempunyai "pakej.fail json "dan folder" node_modules "yang mengandungi kebergantungan dan modul yang diperlukan.
Aplikasi Elektron Pakej
Anda boleh menggunakan Electron Forge untuk mengemas aplikasi anda, seperti yang disarankan oleh dokumentasi Electron rasmi.
Jalankan arahan di bawah untuk menambahkan Electron Forge ke projek anda:
$ npx @ electron-forge / cli @ import terkiniAnda akan melihat beberapa output seperti ini:
✔ Memeriksa sistem anda✔ Memulakan Git Repository
✔ Menulis pakej yang diubah suai.fail json
✔ Memasang kebergantungan
✔ Menulis pakej yang diubah suai.fail json
✔ Memperbaiki .gitignore
Kami PERHATIAN untuk menukar aplikasi anda menjadi dalam format yang difahami oleh electron-forge.
Terima kasih kerana menggunakan "electron-forge"!!!
Semak pakej “.fail json "dan edit atau hapus entri dari bahagian" pembuat "mengikut keperluan anda. Misalnya, jika Anda tidak ingin membuat file "RPM", hapus entri yang berkaitan dengan pembuatan paket "RPM".
Jalankan arahan berikut untuk membina pakej aplikasi:
$ npm run makeAnda harus mendapat beberapa output yang serupa dengan ini:
> helloworld @ 1.0.0 buat / rumah / nit / HelloWorld> membuat elektron-tempa
✔ Memeriksa sistem anda
✔ Menyelesaikan Forge Config
Kami perlu mengemas aplikasi anda sebelum dapat membuatnya
✔ Bersedia untuk Memakej Aplikasi untuk lengkungan: x64
✔ Menyiapkan kebergantungan asli
✔ Aplikasi Pembungkusan
Membuat sasaran berikut: deb
✔ Membuat untuk sasaran: deb - Di platform: linux - Untuk lengkungan: x64
Saya mengedit "pakej.fail json "untuk membina hanya pakej" DEB ". Anda dapat mencari pakej terbina dalam folder "keluar" yang terdapat di dalam direktori projek anda.
Kesimpulannya
Elektron sangat bagus untuk membuat aplikasi merentas platform berdasarkan satu pangkalan kode tunggal dengan perubahan khusus OS kecil. Ia mempunyai beberapa masalah tersendiri, yang paling penting ialah penggunaan sumber. Oleh kerana semuanya diberikan dalam penyemak imbas mandiri dan tetingkap penyemak imbas baru dilancarkan dengan setiap aplikasi Elektron, aplikasi ini dapat menjadi sumber daya yang intensif berbanding dengan aplikasi lain yang menggunakan alat pengembangan aplikasi khusus OS.
