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

發(fā)布時間：2020-07-18 10:49:43 來源：億速云閱讀：278 作者：小豬欄目：web開發(fā)

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

簡介

用于構(gòu)建用戶界面的 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 &#63; 'http://localhost:3000' : 'dummyurl'
 mainWindow.loadURL(urlLocation);
})

修改json配置文件

在json文件中添加下面兩行

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

首先運行npm start，然后再開啟一個shell運行npm run dev

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

遇到的問題

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

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

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

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

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

向AI問一下細節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽