簡介

用於構建使用者介面的 JavaScript 庫

步驟

首先建立React

npx create-react-app doc

進入到doc專案

cd doc

安裝electron

npm install electron --save-dev

安裝依賴

判斷是否為生產環境

cnpm install electron-is-dev --save-dev

在專案根目錄建立main.js

const { app,BrowserWindow } = require('electron')
const isDev = require('electron-is-dev')
let mainWindow;

app.on('ready',() => {
 mainWindow = new BrowserWindow({
  width: 1024,height: 680,webPreferences:{
   nodeIntegration: true,}
 })
 const urlLocation = isDev ? 'http://localhost:3000' : 'dummyurl'
 mainWindow.loadURL(urlLocation);
})

修改json配置檔案

在json檔案中新增下面兩行

首先執行npm start，然後再開啟一個shell執行npm run dev

遇到的問題

1、需要多次執行，十分的麻煩

2、每次會自動開啟瀏覽器

3、react執行的速度慢，electron載入不到，需要手動重新整理

完善

安裝依賴

同時執行多個命令https://www.npmjs.com/package/concurrently

cnpm install concurrently --save-dev

等待資源載入完成https://www.npmjs.com/package/wait-on

cnpm install wait-on --save-dev

環境變數https://www.npmjs.com/package/cross-env

cnpm install cross-env --save-dev

完善後的json

"dev": "concurrently \" wait-on http://localhost:3000 && electron . \" \" cross-env BROWSER=none npm start \" "

配置完成之後直接在終端執行npm run dev，之後會彈出我們的介面

總結

到此這篇關於Electron整合React使用搭建開發環境的步驟詳解的文章就介紹到這了,更多相關Electron整合React搭建環境內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！