使用Electron建立React+Webpack桌面應用程式（詳細教學）
- 亚连原創
- 2018-06-20 15:27:422261瀏覽
本篇文章主要介紹了使用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>{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`);即可進行下一步建置操作。 ！注意，在建置最終應用程式前應該注意此時的web檔案是否在webpack-dev-server下運作，若是則應該使用webpack產生靜態打包檔。 本文專案文件地址：https://github.com/Voyager-One/react-webpack-electron上面是我整理給大家的，希望今後對大家有幫助。 相關文章：
以上是使用Electron建立React+Webpack桌面應用程式（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn