使用Electron構(gòu)建React+Webpack桌面應(yīng)用的方法
前言
Electron可以使用HTML、CSS、JavaScript構(gòu)建跨平臺(tái)桌面應(yīng)用，可是在使用到React和Webpack時(shí)，會(huì)遇到一些配置問(wèn)題，本文將針對(duì)React+Webpack下的Electron配置提供一個(gè)通用的解決方案。
環(huán)境配置
"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
由于使用默認(rèn)的Webpack打包，會(huì)生成一個(gè)很大的bundle文件，在桌面端比較影響性能，而調(diào)試的時(shí)候卻需要較快地生成bundle，可是又需要使用sourcemap來(lái)定位bug，所以我們使用一個(gè)函數(shù)來(lái)切換各種環(huán)境：
module.exports = (env)=>{
******
const isProduction = env==='production';
******
devtool: isProduction ? 'source-map':'inline-source-map',
而我們?cè)趐ackage.json文件里，編寫(xiě)以下命令：
"build:dev": "webpack", "build:prod":"webpack -p --env production",
就可以較好的切換環(huán)境。
以下是全部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在調(diào)試時(shí)只能在Electron下作用。
React
本次編寫(xiě)的是一個(gè)簡(jiǎn)單的顯示時(shí)間的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 (
<div>
<h1>{timetext}</h1>
</div>
);
}
}
export default Time;
Electron
本次的App不涉及復(fù)雜的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> <div id="app"></div> <script src="./dist/bundle.js"></script> </body> </html>
我們將webpack打包的js和css加載到html中。
調(diào)試
yarn run build:prod
首先我們用webpack打包文件，在dist/下生成bundle.js和style.css
yarn run electron
開(kāi)始調(diào)試：
構(gòu)建App
我們?cè)趐ackage.json文件里添加如下命令：
"packager": "electron-packager . --platform=darwin --electron-version=1.7.9 --overwrite"
意思為構(gòu)建Mac桌面應(yīng)用，并覆蓋之前我們使用該命令構(gòu)建的文件。
等待一會(huì)兒會(huì)在目錄下看到構(gòu)建好的文件夾，里面便是我們的桌面應(yīng)用。
而在這時(shí)我們打開(kāi)應(yīng)用，會(huì)發(fā)現(xiàn)其在調(diào)試中的導(dǎo)航欄菜單均已消失，只有一個(gè)退出選項(xiàng)，這是因?yàn)槲覀儾](méi)有設(shè)置應(yīng)用的菜單欄項(xiàng)目，Electron在構(gòu)建App時(shí)會(huì)舍去調(diào)試的各種菜單。
改進(jìn)
大家應(yīng)該注意到按照之前的方法，我們?cè)谡{(diào)試時(shí)每修改一次就要重用webpack打包，當(dāng)然也可以使用webpack-dev-server來(lái)監(jiān)測(cè)改變。只不過(guò)這樣我們需要對(duì)項(xiàng)目進(jìn)行調(diào)整：
在index.js文件里修改loadURL為：
mainWindow.loadURL(`http://localhost:8080/index.html`);
再運(yùn)行：
yarn run electron
因?yàn)榇藭r(shí)我們是檢測(cè)的webpack-dev-server下的文件，此時(shí)我們?cè)陧?xiàng)目中做的修改就能實(shí)時(shí)在electron中看到了。
若調(diào)試和測(cè)試完成，只需要修改loadURL為：
mainWindow.loadURL(`file://${__dirname}/public/index.html`);
即可進(jìn)行下一步構(gòu)建操作。
！注意，在構(gòu)建最終應(yīng)用前應(yīng)該注意此時(shí)的web文件是否在webpack-dev-server下運(yùn)作，若是則應(yīng)該使用webpack生成靜態(tài)打包文件。
本文項(xiàng)目文件地址：https://github.com/Voyager-One/react-webpack-electron
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
useReducer是在react V16.8推出的鉤子函數(shù)，從用法層面來(lái)說(shuō)是可以代替useState。相信前期使用過(guò) React 的前端同學(xué)，大都會(huì)經(jīng)歷從class語(yǔ)法向hooks用法的轉(zhuǎn)變，react的hooks編程給我們帶來(lái)了絲滑的函數(shù)式編程體驗(yàn)2022-10-10
基于Webpack5 Module Federation的業(yè)務(wù)解耦實(shí)踐示例
這篇文章主要為大家介紹了基于Webpack5 Module Federation的業(yè)務(wù)解耦實(shí)踐示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
react-native DatePicker日期選擇組件的實(shí)現(xiàn)代碼
本篇文章主要介紹了react-native DatePicker日期選擇組件的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，有興趣的可以了解下2017-09-09
react-native聊天室|RN版聊天App仿微信實(shí)例|RN仿微信界面
這篇文章主要介紹了react-native聊天室|RN版聊天App仿微信實(shí)例|RN仿微信界面,需要的朋友可以參考下2019-11-11
一文詳解如何使用React監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)
在現(xiàn)代Web應(yīng)用程序中，網(wǎng)絡(luò)連接是至關(guān)重要的，通過(guò)監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)，我們可以為用戶(hù)提供更好的體驗(yàn)，例如在斷網(wǎng)時(shí)顯示有關(guān)網(wǎng)絡(luò)狀態(tài)的信息，本文將介紹如何使用React監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)的變化，并提供相應(yīng)的代碼示例2023-06-06
React之錯(cuò)誤邊界 Error Boundaries示例詳解
這篇文章主要為大家介紹了React之錯(cuò)誤邊界Error Boundaries示例教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
React獲取Java后臺(tái)文件流并下載Excel文件流程解析
這篇文章主要介紹了React獲取Java后臺(tái)文件流下載Excel文件,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
一個(gè)路由就是一個(gè)映射關(guān)系(key:value),key為路徑, value可能是function或component,本文給大家介紹React 路由react-router-dom詳解,感興趣的朋友跟隨小編一起看看吧2024-01-01
淺談webpack+react多頁(yè)面開(kāi)發(fā)終極架構(gòu)
這篇文章主要介紹了淺談webpack+react多頁(yè)面開(kāi)發(fā)終極架構(gòu)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
本章節(jié)，我們將一起探討 React 中類(lèi)組件和函數(shù)組件的定義，不同組件的通信方式，以及常規(guī)組件的強(qiáng)化方式，幫助你全方位認(rèn)識(shí) React 組件，從而對(duì) React 的底層邏輯有進(jìn)一步的理解，感興趣的朋友跟隨小編一起看看吧2023-06-06