Electron整合React使用搭建開發(fā)環(huán)境的步驟詳解
簡介
用于構建用戶界面的 JavaScript 庫
步驟
首先創(chuàng)建React
npx create-react-app doc
進入到doc項目
cd doc
安裝electron
npm install electron --save-dev
安裝依賴
判斷是否為生產環(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)境的步驟詳解的文章就介紹到這了,更多相關Electron整合React搭建環(huán)境內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了React語法中如何設置TS校驗規(guī)則,文中有詳細的代碼示例供大家參考,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了react PropTypes校驗傳遞的值操作,結合實例形式分析了react PropTypes針對傳遞的值進行校驗操作相關實現技巧,需要的朋友可以參考下2020-04-04
本篇文章主要介紹了react 實現頁面代碼分割、按需加載的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要為大家介紹了react-native只保留3x圖原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要為大家詳細介紹了React的Diff算法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
解決React報錯Unexpected default export of an
這篇文章主要為大家介紹了React報錯Unexpected default export of anonymous function解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了React 表單與事件的相關資料，文中示例代碼非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
React+umi+typeScript創(chuàng)建項目的過程
這篇文章主要介紹了React+umi+typeScript創(chuàng)建項目的過程,結合代碼介紹了項目框架搭建的方式，本文給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
React 提供了 refrefref 屬性，讓我們可以引用組件的實例或者原生 DOM 元素,使用 refrefref，可以在父組件中調用子組件暴露出來的方法，或者調用原生 element 的 API,這篇文章主要介紹了React中的ref屬性的使用,需要的朋友可以參考下2023-04-04
詳解React?如何防止?XSS?攻擊論$$typeof?的作用
這篇文章主要介紹了詳解React?如何防止?XSS?攻擊論$$typeof?的作用，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07