React Electron生成桌面應(yīng)用過(guò)程
一、創(chuàng)建react項(xiàng)目
首先使用creat-react-app腳手架來(lái)創(chuàng)建一個(gè)react項(xiàng)目
# 安裝 create-react-app 命令,如果已將安裝請(qǐng)忽略
npm install -g create-react-app
# 創(chuàng)建 react項(xiàng)目
create-react-app react-electron
# 啟動(dòng)項(xiàng)目( create-react-app 真的超級(jí)方便啊)
cd react-electron && npm start
npm start之后瀏覽器會(huì)自動(dòng)打開網(wǎng)址 http://localhost:3000/ ，出現(xiàn)react項(xiàng)目的頁(yè)面了
二、安裝Electron
#在react-electron項(xiàng)目目錄下
npm install -save electron
三、配置文件
1.在項(xiàng)目根目錄新建main.js
const { app, BrowserWindow } = require("electron")
const path = require('path')
const url = require('url')
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 800,
minWidth: 800,
minHeight: 800
})
win.loadURL("http://localhost:3000/")
}
app.whenReady().then(() => {
createWindow()
app.on("active", () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit()
}
})
2.配置package.json
添加如下兩項(xiàng)配置：
{
"main": "main.js", // 配置electron的啟動(dòng)文件
"scripts": {
"electron-start": "electron ."
},
}3.啟動(dòng)electron
# 這里要打開兩個(gè)窗口
# 啟動(dòng)react項(xiàng)目
npm start
# 啟動(dòng)electron
npm run electron-start
npm run electron-start之后會(huì)自動(dòng)出現(xiàn)桌面應(yīng)用
四、打包Electron桌面應(yīng)用
安裝 electron-packager
npm install electron-packager -D
** 配置homePage字段**在package.json文件中添加如下配置
{
"homepage": "."
}
{
"script": {
"package": "electron-packager ./build react-electron --platform=darwin --arch=x64 --electron-version 17.1.0 --overwrite"
}
}
//mac系統(tǒng) --platform=darwin
//Windows系統(tǒng) --platform=win32
然后打包react代碼，根目錄會(huì)多出一個(gè)build文件夾
npm run build
將main.js和package.json兩個(gè)文件復(fù)制到build文件夾下，同時(shí)修改build文件夾下的main.js
// 加載應(yīng)用----electron默認(rèn)的打包入口
win.loadURL(url.format({
pathname: path.join(__dirname, './index.html'), // 修改這里
protocol: 'file:',
slashes: true
}))
在根目錄運(yùn)行打包命令
npm run package
到此這篇關(guān)于React Electron生成桌面應(yīng)用過(guò)程的文章就介紹到這了,更多相關(guān)React Electron桌面應(yīng)用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于PixiJS實(shí)現(xiàn)react圖標(biāo)旋轉(zhuǎn)動(dòng)效
PixiJS是一個(gè)開源的基于web的渲染系統(tǒng)，為游戲、數(shù)據(jù)可視化和其他圖形密集型項(xiàng)目提供了極快的性能，這篇文章主要介紹了用PixiJS實(shí)現(xiàn)react圖標(biāo)旋轉(zhuǎn)動(dòng)效,需要的朋友可以參考下2022-05-05
Immutable.js出自Facebook，是最流行的不可變數(shù)據(jù)結(jié)構(gòu)的實(shí)現(xiàn)之一。它實(shí)現(xiàn)了完全的持久化數(shù)據(jù)結(jié)構(gòu)，使用結(jié)構(gòu)共享。所有的更新操作都會(huì)返回新的值，但是在內(nèi)部結(jié)構(gòu)是共享的，來(lái)減少內(nèi)存占用2022-09-09
在V6版本中，<Switch>組件被替換成<Routes>組件，同時(shí)，component屬性被element屬性替換，這篇文章主要介紹了react-router?v6新特性總結(jié),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了React?如何向url中添加參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了react hooks實(shí)現(xiàn)原理,文中給大家介紹了useState dispatch函數(shù)如何與其使用的Function Component進(jìn)行綁定，實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-10-10
react中使用ant組件庫(kù)的modal彈窗報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了react中使用ant組件庫(kù)的modal彈窗報(bào)錯(cuò)問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
D3.js(v3)+react 實(shí)現(xiàn)帶坐標(biāo)與比例尺的散點(diǎn)圖 (V3版本)
散點(diǎn)圖(Scatter Chart),通常是一橫一豎兩個(gè)坐標(biāo)軸，數(shù)據(jù)是一組二維坐標(biāo)，分別對(duì)應(yīng)兩個(gè)坐標(biāo)軸，與坐標(biāo)軸對(duì)應(yīng)的地方打上點(diǎn)。由此可以猜到，需要的元素包括circle(圓)和axis(坐標(biāo)軸),接下來(lái)通過(guò)本文大家分享D3.js(v3)+react 實(shí)現(xiàn)帶坐標(biāo)與比例尺的散點(diǎn)圖 (V3版本) ，一起看看2019-05-05
React如何實(shí)現(xiàn)Vue的watch監(jiān)聽屬性
在 Vue 中可以簡(jiǎn)單地使用 watch 來(lái)監(jiān)聽數(shù)據(jù)的變化，還能獲取到改變前的舊值，而在 React 中是沒(méi)有 watch 的，今天通過(guò)本文給大家講解React實(shí)現(xiàn)Vue的watch監(jiān)聽屬性的方法,需要的朋友可以參考下2023-06-06
react使用websocket實(shí)時(shí)通信方式
這篇文章主要介紹了react使用websocket實(shí)時(shí)通信方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
React中的render何時(shí)執(zhí)行過(guò)程
這篇文章主要介紹了React中的render何時(shí)執(zhí)行過(guò)程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04