詳解Electron如何整合React使用搭建開發(fā)環(huán)境

小編這次要給大家分享的是詳解Electron如何整合React使用搭建開發(fā)環(huán)境，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設,費縣企業(yè)網(wǎng)站建設,費縣品牌網(wǎng)站建設,網(wǎng)站定制,費縣網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,費縣網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

簡介

用于構建用戶界面的 JavaScript 庫

步驟

首先創(chuàng)建React

npx create-react-app doc

進入到doc項目

cd doc

安裝electron

npm install electron --save-dev

安裝依賴

判斷是否為生產(chǎn)環(huán)境

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

在項目根目錄創(chuàng)建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加載不到，需要手動刷新

完善

安裝依賴

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

cnpm install concurrently --save-dev

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

cnpm install wait-on --save-dev

環(huán)境變量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 \" "

配置完成之后直接在終端執(zhí)行npm run dev，之后會彈出我們的界面

看完這篇關于詳解Electron如何整合React使用搭建開發(fā)環(huán)境的文章，如果覺得文章內(nèi)容寫得不錯的話，可以把它分享出去給更多人看到。