Electron打包React生成桌面應(yīng)用方法詳解
一、Electron簡(jiǎn)介
Electron是一個(gè)能讓你使用JavaScript,HTML和CSS來(lái)創(chuàng)建桌面應(yīng)用程序的框架。這些應(yīng)用程序可以打包后在 macOS、Windows 和 Linux 上直接運(yùn)行。
在目前瀏覽器和移動(dòng)端盛行的互聯(lián)網(wǎng)環(huán)境下,跨平臺(tái)的桌面應(yīng)用開(kāi)發(fā),也為前端提供了一個(gè)新分支方向。
二、搭建準(zhǔn)備
1、檢查git和node是否安裝完成
git --version
node -v
npm -v
2、搭建React
安裝create-react-app
npm install -g create-react-app
創(chuàng)建my-electron-app項(xiàng)目
create-react-app my-electron-app
啟動(dòng)項(xiàng)目
cd my-electron-app && npm start
3、安裝electron包
npm i --save-dev electron
三、創(chuàng)建基本應(yīng)用程序
首先需要了解下Electron,用Electron開(kāi)發(fā)應(yīng)用程序就像構(gòu)建一個(gè)帶有網(wǎng)頁(yè)界面的Node.js應(yīng)用程序。同樣使用package.json文件作為主入口,主腳本指定了運(yùn)行主進(jìn)程的 Electron應(yīng)用程序的入口,這里是main.js 文件。
1、創(chuàng)建main.js文件
// 導(dǎo)入app、BrowserWindow模塊 // app 控制應(yīng)用程序的事件生命周期。事件調(diào)用app.on('eventName', callback),方法調(diào)用app.functionName(arg) // BrowserWindow 創(chuàng)建和控制瀏覽器窗口。new BrowserWindow([options]) 事件和方法調(diào)用同app // Electron參考文檔 https://www.electronjs.org/docs const { app, BrowserWindow, nativeImage } = require('electron'); const url = require('url'); const path = require('path'); function createWindow () { let mainWindow = new BrowserWindow({ width: 800, // 窗口寬度 height: 600, // 窗口高度 title: "Electron", // 窗口標(biāo)題,如果由loadURL()加載的HTML文件中含有標(biāo)簽<title>,該屬性可忽略 icon: nativeImage.createFromPath('src/public/favicon.ico'), // "string" || nativeImage.createFromPath('src/image/icons/256x256.ico')從位于 path 的文件創(chuàng)建新的 NativeImage 實(shí)例 webPreferences: { // 網(wǎng)頁(yè)功能設(shè)置 nodeIntegration: true, // 是否啟用node集成 渲染進(jìn)程的內(nèi)容有訪問(wèn)node的能力 webviewTag: true, // 是否使用<webview>標(biāo)簽 在一個(gè)獨(dú)立的 frame 和進(jìn)程里顯示外部 web 內(nèi)容 webSecurity: false, // 禁用同源策略 nodeIntegrationInSubFrames: true // 是否允許在子頁(yè)面(iframe)或子窗口(child window)中集成Node.js } }); // 加載應(yīng)用 --打包react應(yīng)用后,__dirname為當(dāng)前文件路徑 // mainWindow.loadURL(url.format({ // pathname: path.join(__dirname, './build/index.html'), // protocol: 'file:', // slashes: true // })); // 加載應(yīng)用 --開(kāi)發(fā)階段 需要運(yùn)行 npm run start mainWindow.loadURL('http://localhost:3000/'); // 解決應(yīng)用啟動(dòng)白屏問(wèn)題 mainWindow.on('ready-to-show', () => { mainWindow.show(); mainWindow.focus(); }); // 當(dāng)窗口關(guān)閉時(shí)發(fā)出。在你收到這個(gè)事件后,你應(yīng)該刪除對(duì)窗口的引用,并避免再使用它。 mainWindow.on('closed', () => { mainWindow = null; }); } app.whenReady().then(createWindow); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }); app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } });
2、修改package.json文件
主進(jìn)程文件創(chuàng)建好了,修改package.json文件。
(1)配置啟動(dòng)文件,添加main字段,我們這里也就是main.js文件。如果沒(méi)有添加,Electron 將嘗試加載包含在package.json文件目錄中的index.js文件。
(2)配置運(yùn)行命令,使用"electron-start": "electron ." 。
{ "name": "my-electron-app", "version": "0.1.0", "private": true, "main": "main.js", // 配置啟動(dòng)文件 "homepage":".", // 設(shè)置應(yīng)用打包的根路徑 更多了解參考:https://segmentfault.com/a/1190000021875558 "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "react": "^17.0.1", "react-dom": "^17.0.1", "react-scripts": "4.0.1", "web-vitals": "^0.2.4" }, "scripts": { "start": "react-scripts start", // react 啟動(dòng)命令 "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "electron-start": "electron ." // electron 啟動(dòng)命令 }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "electron": "^11.1.1" } }
3、啟動(dòng)Electron
準(zhǔn)備工作就完成了,進(jìn)行啟動(dòng)
main.js文件中如果設(shè)置的mainWindow.loadURL('http://localhost:3000/'); 則需要啟動(dòng)react項(xiàng)目
啟動(dòng)react項(xiàng)目
npm start
啟動(dòng)electron
npm run electron-start
四、打包項(xiàng)目
1、打包react項(xiàng)目
npm run build
將main文件中注釋的mainWindow.loadURL適用于react打包的方法釋放開(kāi)。
2、打包 electron使用electron-packager依賴
npm install electron-packager --save-dev
3、package.json配置打包命令
"package": "electron-packager . my-electron-app --platform=win32 --arch=x64 --overwrite --electron-version=11.1.1"
4、 配置解釋
electron-packager <應(yīng)用目錄> <應(yīng)用名稱> <打包平臺(tái)> <架構(gòu)x86 還是 x64> <架構(gòu)> <electron版本> overwrite 如果輸出目錄已經(jīng)存在,替換它
5、 運(yùn)行打包命令
npm run package
到此這篇關(guān)于Electron打包React生成桌面應(yīng)用方法詳解的文章就介紹到這了,更多相關(guān)Electron React桌面應(yīng)用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React中useState的使用方法及注意事項(xiàng)
useState通過(guò)在函數(shù)組件里調(diào)用它來(lái)給組件添加一些內(nèi)部state,下面這篇文章主要給大家介紹了關(guān)于React中useState的使用方法及注意事項(xiàng)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08React?跨端動(dòng)態(tài)化核心技術(shù)實(shí)例分析
這篇文章主要為大家介紹了React?跨端動(dòng)態(tài)化核心技術(shù)實(shí)例分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10React中的路由嵌套和手動(dòng)實(shí)現(xiàn)路由跳轉(zhuǎn)的方式詳解
這篇文章主要介紹了React中的路由嵌套和手動(dòng)實(shí)現(xiàn)路由跳轉(zhuǎn)的方式,手動(dòng)路由的跳轉(zhuǎn),主要是通過(guò)Link或者NavLink進(jìn)行跳轉(zhuǎn)的,實(shí)際上我們也可以通JavaScript代碼進(jìn)行跳轉(zhuǎn),需要的朋友可以參考下2022-11-11react?hooks?計(jì)數(shù)器實(shí)現(xiàn)代碼
這篇文章主要介紹了react?hooks計(jì)數(shù)器實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08React實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果(樓梯效果)
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果,樓梯效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09React?Native?中處理?Android?手機(jī)吞字的解決方案
這篇文章主要介紹了React?Native?中處理?Android?手機(jī)吞字的解決方案,作者在 React Native 0.67.4 環(huán)境下,編寫(xiě)了一個(gè)小 demo 來(lái)復(fù)現(xiàn)這個(gè)問(wèn)題,需要的朋友可以參考下2022-08-08