React Electron生成桌面應(yīng)用過程
一、創(chuàng)建react項目
首先使用creat-react-app腳手架來創(chuàng)建一個react項目
# 安裝 create-react-app 命令,如果已將安裝請忽略
npm install -g create-react-app
# 創(chuàng)建 react項目
create-react-app react-electron
# 啟動項目( create-react-app 真的超級方便啊)
cd react-electron && npm start
npm start之后瀏覽器會自動打開網(wǎng)址 http://localhost:3000/ ,出現(xiàn)react項目的頁面了

二、安裝Electron
#在react-electron項目目錄下
npm install -save electron
三、配置文件
1.在項目根目錄新建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
添加如下兩項配置:
{
"main": "main.js", // 配置electron的啟動文件
"scripts": {
"electron-start": "electron ."
},
}3.啟動electron
# 這里要打開兩個窗口
# 啟動react項目
npm start
# 啟動electron
npm run electron-start
npm run electron-start之后會自動出現(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代碼,根目錄會多出一個build文件夾
npm run build
將main.js和package.json兩個文件復(fù)制到build文件夾下,同時修改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ān)React Electron桌面應(yīng)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React不使用requestIdleCallback實現(xiàn)調(diào)度原理解析
這篇文章主要為大家介紹了React不使用requestIdleCallback實現(xiàn)調(diào)度原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11
React?+?Typescript領(lǐng)域初學(xué)者的常見問題和技巧(最新)
這篇文章主要介紹了React?+?Typescript領(lǐng)域初學(xué)者的常見問題和技巧,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06
關(guān)于React中使用window.print()出現(xiàn)頁面無響應(yīng)問題解決記錄
這篇文章主要介紹了React中使用window.print()出現(xiàn)頁面無響應(yīng)問題解決記錄,首先問題原因可能是操作了document但是并未進(jìn)行銷毀(可能是),具體問題解決思路參考下本文吧2021-11-11
React?Hooks中?useRef和useImperativeHandle的使用方式
這篇文章主要介紹了React?Hooks中?useRef和useImperativeHandle的使用方式,文中說明了useRef和useCallback一起使用,?可以解決閉包陷阱的問題,本文結(jié)合實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10

