使用Electron建立React+Webpack桌面應用程式（詳細教學）
本篇文章主要介紹了使用Electron建構React Webpack桌面應用程式的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧
前言
Electron可以使用HTML、CSS、JavaScript建構跨平台桌面應用，可是在使用到React和Webpack時，會遇到一些設定問題，本文將針對React Webpack下的Electron配置提供一個通用的解決方案。
環境設定
"babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.7", "electron": "^1.7.9", "electron-packager": "^10.1.0", "extract-text-webpack-plugin": "^3.0.2", "node-sass": "^4.7.2", "react": "^16.2.0", "react-dom": "^16.2.0", "sass-loader": "^6.0.6", "style-loader": "^0.19.1", "webpack": "^3.10.0", "webpack-dev-server": "^2.9.7"
設定webpack.config.js
由於使用預設的Webpack打包，會產生一個很大的bundle文件，在桌面端比較影響性能，而調試的時候卻需要較快地生成bundle，可是又需要使用sourcemap來定位bug，所以我們使用一個函數來切換各種環境：
module.exports = (env)=>{
******
const isProduction = env==='production';
******
devtool: isProduction ? 'source-map':'inline-source-map',而我們在package.json檔案裡，寫以下指令：
"build:dev": "webpack", "build:prod":"webpack -p --env production",
就可以較好的切換環境。
以下是全部webpack.config.js：
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = (env)=>{
const isProduction = env==='production';
const CSSExtract = new ExtractTextPlugin('styles.css');
console.log('env='+env);
return {
entry:'./src/app.js',
target: 'electron-renderer',
output:{
path:path.join(__dirname, 'public','dist'),
filename:'bundle.js'
},
module:{
rules:[{
loader: 'babel-loader',
test: /\.js(x)?$/,
exclude: /node_modules/
}, {
test: /\.s?css$/,
use:CSSExtract.extract({
use:[
{
loader:'css-loader',
options:{
sourceMap:true
}
},
{
loader:'sass-loader',
options:{
sourceMap:true
}
}
]
})
}]
},
plugins:[
CSSExtract
],
devtool: isProduction ? 'source-map':'inline-source-map',
devServer:{
contentBase: path.join(__dirname, 'public'),
historyApiFallback:true,
publicPath:'/dist/'
}
};
}注意：target: 'electron-renderer',讓我們的App在調試時只能在Electron下運作。
React
本次寫的是一個簡單的顯示時間的App，React 模組如下：
import React from 'react';
class Time extends React.Component{
state = {
time:''
}
getTime(){
let date = new Date();
let Year = date.getFullYear();
let Month = date.getMonth();
let Day = date.getDate();
let Hour = date.getHours();
let Minute = date.getMinutes();
let Seconds = date.getSeconds();
let time = Year+'年'+Month+'月'+Day+'日'+Hour+':'+Minute+':'+Seconds;
return time;
}
componentDidMount(){
setInterval(()=>{
this.setState(()=>{
return {
time:this.getTime()
}
});
},1000);
}
render(){
let timetext = this.state.time;
return (
<p>
<h1 id="timetext">{timetext}</h1>
</p>
);
}
}
export default Time;Electron
本次的App不涉及複雜的Electron API，僅作為展示的容器：
const electron = require('electron');
const {app,BrowserWindow} = electron;
let mainWindow = electron;
app.on('ready',()=>{
mainWindow = new BrowserWindow({});
mainWindow.loadURL(`file://${__dirname}/public/index.html`);
});index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>React-Webpack-Electron</title> <link rel="stylesheet" type="text/css" href="./dist/styles.css" rel="external nofollow" > </head> <body> <p id="app"></p> <script src="./dist/bundle.js"></script> </body> </html>
我們將webpack打包的js和css載入到html中。
調試
yarn run build:prod
首先我們用webpack打包文件，在dist/下產生bundle. js和style.css
yarn run electron
#開始偵錯：
改進
大家應該注意到依照先前的方法，我們在除錯時每修改一次就要重複使用webpack打包，當然也可以使用webpack-dev-server來監測改變。只不過這樣我們需要對專案進行調整：在index.js檔案裡修改loadURL為：mainWindow.loadURL(`http://localhost:8080/index.html`);
yarn run electron
mainWindow.loadURL(`file://${__dirname}/public/index.html`);以上是使用Electron建立React+Webpack桌面應用程式（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
React前後端分離指南：如何實作前後端的解耦與獨立部署
Sep 28, 2023 am 10:48 AM
React前後端分離指南：如何實現前後端的解耦和獨立部署，需要具體程式碼範例在當今的Web開發環境中，前後端分離已經成為一種趨勢。透過將前端和後端程式碼分開，可以讓開發工作更加靈活、高效，並且方便進行團隊協作。本文將介紹如何使用React實現前後端分離，從而實現解耦和獨立部署的目標。首先，我們要先理解什麼是前後端分離。傳統的Web開發模式中，前端和後端是耦合在
如何利用React和Flask建構簡單易用的網路應用
Sep 27, 2023 am 11:09 AM
如何利用React和Flask建構簡單易用的網路應用引言：隨著網路的發展，網路應用的需求也越來越多樣化和複雜化。為了滿足使用者對於易用性和效能的要求，使用現代化的技術堆疊來建立網路應用變得越來越重要。 React和Flask是兩個在前端和後端開發中非常受歡迎的框架，它們可以很好的結合在一起，用來建立簡單易用的網路應用。本文將詳細介紹如何利用React和Flask
如何利用React和RabbitMQ建立可靠的訊息應用
Sep 28, 2023 pm 08:24 PM
如何利用React和RabbitMQ建立可靠的訊息傳遞應用程式引言：現代化的應用程式需要支援可靠的訊息傳遞，以實現即時更新和資料同步等功能。 React是一種流行的JavaScript庫，用於建立使用者介面，而RabbitMQ是一種可靠的訊息傳遞中間件。本文將介紹如何結合React和RabbitMQ建立可靠的訊息傳遞應用，並提供具體的程式碼範例。 RabbitMQ概述：
React Router使用指南：如何實現前端路由控制
Sep 29, 2023 pm 05:45 PM
ReactRouter使用指南：如何實現前端路由控制隨著單頁應用的流行，前端路由成為了一個不可忽視的重要部分。 ReactRouter作為React生態系統中最受歡迎的路由庫，提供了豐富的功能和易用的API，使得前端路由的實作變得非常簡單和靈活。本文將介紹ReactRouter的使用方法，並提供一些具體的程式碼範例。安裝ReactRouter首先，我們需要
如何利用React與Apache Kafka建構即時資料處理應用
Sep 27, 2023 pm 02:25 PM
如何利用React和ApacheKafka來建立即時資料處理應用介紹：隨著大數據與即時資料處理的興起，建構即時資料處理應用成為了許多開發者的追求。 React作為一個流行的前端框架，與ApacheKafka作為一個高效能的分散式訊息系統的結合，可以幫助我們建立即時資料處理應用。本文將介紹如何利用React和ApacheKafka建構即時資料處理應用，並
PHP、Vue和React：如何選擇最適合的前端框架？
Mar 15, 2024 pm 05:48 PM
PHP、Vue和React：如何選擇最適合的前端框架？隨著互聯網技術的不斷發展，前端框架在Web開發中起著至關重要的作用。 PHP、Vue和React作為三種代表性的前端框架，每一種都具有其獨特的特徵和優勢。在選擇使用哪種前端框架時，開發人員需要根據專案需求、團隊技能和個人偏好做出明智的決策。本文將透過比較PHP、Vue和React這三種前端框架的特徵和使
Java框架與前端React框架的整合
Jun 01, 2024 pm 03:16 PM
Java框架與React框架的整合：步驟：設定後端Java框架。建立專案結構。配置建置工具。建立React應用程式。編寫RESTAPI端點。配置通訊機制。實戰案例（SpringBoot+React）：Java程式碼：定義RESTfulAPI控制器。 React程式碼：取得並顯示API回傳的資料。
如何利用React開發一個響應式的後台管理系統
Sep 28, 2023 pm 04:55 PM
如何利用React開發一個響應式的後台管理系統隨著互聯網的快速發展，越來越多的企業和組織需要一個高效、靈活、易於管理的後台管理系統來處理日常的操作事務。 React作為目前最受歡迎的JavaScript庫之一，提供了一種簡潔、高效和可維護的方式來建立使用者介面。本文將介紹如何利用React開發一個響應式的後台管理系統，並給出具體的程式碼範例。建立React專案首先
