การตั้งค่ารีแอ็กต์ร่วมกับอิเล็กตรอน

การตั้งค่า React ร่วมกับ Electron เริ่มจากสร้างโครงการ React ด้วย Vite จากนั้นเพิ่ม electron และ electron-builder เป็น devDependencies สุดท้ายโครงการจะมีจุดเริ่มต้นสองจุด ได้แก่ แอป Vite สำหรับกระบวนการเรนเดอร์ และไฟล์ main.js สำหรับกระบวนการหลักของ Electron

main.js คือจุดเริ่มต้นของ Electron โดยจะสร้าง BrowserWindow พร้อมขนาดหน้าต่างและการตั้งค่าความปลอดภัยตามต้องการ จากนั้นโหลดแอป React โดยชี้ไปยัง localhost:5173 ระหว่างการพัฒนา และชี้ไปยังเส้นทางไฟล์ที่สร้างแล้วเมื่อใช้งานจริง

electron-vite คือเครื่องมือสร้างแบบครบวงจรที่ผสาน Vite เข้ากับ Electron และจัดการการตั้งค่าการสร้างสำหรับหลายกระบวนการที่ซับซ้อนให้โดยอัตโนมัติ เครื่องมือนี้มีการตั้งค่า Vite แยกสำหรับกระบวนการหลัก กระบวนการ preload และกระบวนการเรนเดอร์ จึงช่วยให้การสร้างทั้งระหว่างการพัฒนาและการใช้งานจริงง่ายขึ้นอย่างมาก

เมื่อตั้งค่า Vite สำหรับ Electron คุณต้องกำหนดเป้าหมายเบราว์เซอร์อย่างชัดเจนแทนการพึ่งพาการตรวจหาอัตโนมัติ เพราะกระบวนการเรนเดอร์ทำงานบน Chromium เวอร์ชันเฉพาะที่รวมอยู่ใน Electron electron-vite จัดการเรื่องนี้ให้โดยอัตโนมัติ แต่การตั้งค่าด้วยตนเองต้องระบุเวอร์ชัน chrome ในเป้าหมายการสร้าง

การเรียกใช้ electron-vite dev จะเริ่มทั้งเซิร์ฟเวอร์พัฒนาของ Vite สำหรับกระบวนการเรนเดอร์และกระบวนการหลักของ Electron พร้อมกัน เซิร์ฟเวอร์พัฒนาของ Vite มีการแทนที่โมดูลขณะทำงาน จึงทำให้การเปลี่ยนแปลงคอมโพเนนต์ React ปรากฏในหน้าต่าง Electron ได้ทันทีโดยไม่ต้องเริ่มใหม่ทั้งหมด

HMR ทำงานในกระบวนการเรนเดอร์ของ Electron เช่นเดียวกับในเบราว์เซอร์ คอมโพเนนต์ที่แก้ไขจะเรนเดอร์ใหม่ทันทีโดยยังคงสถานะเดิมไว้ การเปลี่ยนแปลงเฉพาะ main.js หรือสคริปต์ preload เท่านั้นที่ต้องเริ่ม Electron ใหม่ทั้งหมด เนื่องจากส่วนเหล่านี้ทำงานอยู่นอกขอบเขต HMR ของ Vite

โครงการ Electron + React + TypeScript ต้องมีไฟล์ tsconfig แยกสำหรับกระบวนการหลัก (กำหนดเป้าหมายเป็น Node.js/CommonJS) กระบวนการ preload (กำหนดเป้าหมายเป็นสภาพแวดล้อมคล้ายเบราว์เซอร์ที่มีตัวแปรส่วนกลางของ Node) และกระบวนการเรนเดอร์ (TypeScript สำหรับเบราว์เซอร์มาตรฐาน) electron-vite จะสร้างการตั้งค่าเหล่านี้ให้โดยอัตโนมัติ

สคริปต์ preload ใช้ contextBridge.exposeInMainWorld เพื่อเปิดเผย API ที่กำหนดเองให้กระบวนการเรนเดอร์ รูปแบบทั่วไปคือการเปิดเผยเนมสเปซอย่าง "api" พร้อมฟังก์ชันที่ครอบการเรียกใช้ ipcRenderer.invoke เพื่อให้คอมโพเนนต์ React มีส่วนติดต่อแบบอะซิงโครนัสที่สะอาดสำหรับการดำเนินการในกระบวนการหลัก

จากคอมโพเนนต์ React ใด ๆ คุณสามารถเรียก window.api.myFunction() เพื่อเรียกใช้ API ของ preload ที่เปิดเผยไว้ ผู้ใช้ TypeScript มักเพิ่มการประกาศส่วนกลาง (window: Window & { api: MyAPI }) เพื่อให้ได้รับการตรวจสอบชนิดข้อมูลและการเติมข้อความอัตโนมัติสำหรับส่วนติดต่อที่เปิดเผย

electron-vite build จะคอมไพล์เป้าหมายทั้งสามส่วน (กระบวนการหลัก กระบวนการ preload และกระบวนการเรนเดอร์) ลงในโฟลเดอร์ dist/ จากนั้น electron-builder จะบรรจุทั้งหมดเป็นตัวติดตั้งเฉพาะแพลตฟอร์ม main.js สำหรับการใช้งานจริงจะโหลดกระบวนการเรนเดอร์จากเส้นทางไฟล์ที่รวมไว้ แทน URL ของเซิร์ฟเวอร์พัฒนา

ข้อผิดพลาดในการตั้งค่าที่พบบ่อยที่สุด ได้แก่ ลืมกำหนด nodeIntegration:false และ contextIsolation:true (ทำให้เกิดช่องโหว่ด้านความปลอดภัย) โหลด URL ผิดใน main.js (ระหว่างการพัฒนากับการใช้งานจริง) และนำเข้าโมดูล Electron โดยตรงในกระบวนการเรนเดอร์ (ทำให้แอปขัดข้อง) ค่าเริ่มต้นของ electron-vite ช่วยป้องกันปัญหาเหล่านี้ได้เกือบทั้งหมด

การเรียกใช้ electron-vite dev ทำอะไร

การตั้งค่า React ร่วมกับ Electron ทำได้ง่ายขึ้นด้วย electron-vite ซึ่งจัดการความซับซ้อนของการสร้างสำหรับหลายกระบวนการให้ ขั้นตอนการทำงานระหว่างการพัฒนารองรับ HMR อย่างเต็มรูปแบบ contextBridge ช่วยรักษาความปลอดภัยให้พื้นผิว API ของกระบวนการเรนเดอร์ และการตั้งค่า TypeScript ที่แยกกันช่วยให้แต่ละกระบวนการมีสภาพแวดล้อมชนิดข้อมูลที่ถูกต้อง การสร้างสำหรับการใช้งานจริงใช้ electron-builder เพื่อบรรจุแอปให้เหมาะกับแต่ละแพลตฟอร์ม