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è)置TS校驗(yàn)規(guī)則的步驟詳解
這篇文章主要給大家介紹了React語法中如何設(shè)置TS校驗(yàn)規(guī)則,文中有詳細(xì)的代碼示例供大家參考,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-10-10
react PropTypes校驗(yàn)傳遞的值操作示例
這篇文章主要介紹了react PropTypes校驗(yàn)傳遞的值操作,結(jié)合實(shí)例形式分析了react PropTypes針對(duì)傳遞的值進(jìn)行校驗(yàn)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-04-04
react 實(shí)現(xiàn)頁面代碼分割、按需加載的方法
本篇文章主要介紹了react 實(shí)現(xiàn)頁面代碼分割、按需加載的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要為大家介紹了react-native只保留3x圖原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要為大家詳細(xì)介紹了React的Diff算法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
解決React報(bào)錯(cuò)Unexpected default export of an
這篇文章主要為大家介紹了React報(bào)錯(cuò)Unexpected default export of anonymous function解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了React 表單與事件的相關(guān)資料，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
React+umi+typeScript創(chuàng)建項(xiàng)目的過程
這篇文章主要介紹了React+umi+typeScript創(chuàng)建項(xiàng)目的過程,結(jié)合代碼介紹了項(xiàng)目框架搭建的方式，本文給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
React 提供了 refrefref 屬性，讓我們可以引用組件的實(shí)例或者原生 DOM 元素,使用 refrefref，可以在父組件中調(diào)用子組件暴露出來的方法，或者調(diào)用原生 element 的 API,這篇文章主要介紹了React中的ref屬性的使用,需要的朋友可以參考下2023-04-04
詳解React?如何防止?XSS?攻擊論$$typeof?的作用
這篇文章主要介紹了詳解React?如何防止?XSS?攻擊論$$typeof?的作用，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07