Electron整合React使用搭建開發(fā)環(huán)境的步驟詳解
簡介
用于構(gòu)建用戶界面的 JavaScript 庫
步驟
首先創(chuàng)建React
npx create-react-app doc
進(jìn)入到doc項(xiàng)目
cd doc
安裝electron
npm install electron --save-dev
安裝依賴
判斷是否為生產(chǎn)環(huán)境
cnpm install electron-is-dev --save-dev
在項(xiàng)目根目錄創(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文件中添加下面兩行
首先運(yùn)行npm start，然后再開啟一個(gè)shell運(yùn)行npm run dev
遇到的問題
1、需要多次運(yùn)行，十分的麻煩
2、每次會(huì)自動(dòng)打開瀏覽器
3、react運(yùn)行的速度慢，electron加載不到，需要手動(dòng)刷新
完善
安裝依賴
同時(shí)執(zhí)行多個(gè)命令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，之后會(huì)彈出我們的界面
總結(jié)
到此這篇關(guān)于Electron整合React使用搭建開發(fā)環(huán)境的步驟詳解的文章就介紹到這了,更多相關(guān)Electron整合React搭建環(huán)境內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React實(shí)現(xiàn)歌詞滾動(dòng)效果(跟隨音樂播放時(shí)間滾動(dòng))
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)歌詞滾動(dòng)效果(跟隨音樂播放使勁按滾動(dòng)),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2024-02-02
React需要自己開發(fā)支持插槽功能，原理：父組件組件中寫入的HTML，可以傳入子組件的props中，這篇文章主要介紹了React從插槽、路由、redux的詳細(xì)過程,需要的朋友可以參考下2022-10-10
React是一個(gè)狀態(tài)機(jī)主要體現(xiàn)在state上，通過與用戶交易實(shí)現(xiàn)不同的狀態(tài)，state是組件的私有屬性，是用來初始化的，本文重點(diǎn)給大家介紹react中的state的簡寫方式，感興趣的朋友一起看看吧2021-08-08
詳解React-Router中Url參數(shù)改變頁面不刷新的解決辦法
這篇文章主要介紹了詳解React-Router中Url參數(shù)改變頁面不刷新的解決辦法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
解決React報(bào)錯(cuò)Property?'value'?does?not?exist?on?
這篇文章主要為大家介紹了React報(bào)錯(cuò)Property?'value'?does?not?exist?on?type?EventTarget的解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了淺談在react中如何實(shí)現(xiàn)掃碼槍輸入，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了如何在 React Native 中添加自定義字體,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
js中自定義react數(shù)據(jù)驗(yàn)證組件實(shí)例詳解
我們?cè)谧銮岸吮韱翁峤粫r(shí)，經(jīng)常會(huì)遇到要對(duì)表單中的數(shù)據(jù)進(jìn)行校驗(yàn)的問題。這篇文章主要介紹了js中自定義react數(shù)據(jù)驗(yàn)證組件 ,需要的朋友可以參考下2018-10-10
React 中常用的幾種路由跳轉(zhuǎn)方式小結(jié)
基本路由跳轉(zhuǎn)是最常見的一種方式,下面介紹React 中常用的幾種路由跳轉(zhuǎn)方式,感興趣的朋友一起看看吧2023-12-12
react-redux集中式狀態(tài)管理及基本使用與優(yōu)化
react-redux把組件分為兩類，一類叫做UI組件，一類叫做容器組件，這篇文章主要介紹了集中式狀態(tài)管理＜react-redux＞基本使用與優(yōu)化,需要的朋友可以參考下2022-08-08