點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁 - 科技 - 知識(shí)百科 - 正文

使用Electron構(gòu)建React+Webpack桌面應(yīng)用的方法

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:23:34

使用Electron構(gòu)建React+Webpack桌面應(yīng)用的方法

使用Electron構(gòu)建React+Webpack桌面應(yīng)用的方法:前言 Electron可以使用HTML、CSS、JavaScript構(gòu)建跨平臺(tái)桌面應(yīng)用，可是在使用到React和Webpack時(shí)，會(huì)遇到一些配置問題，本文將針對(duì)React+Webpack下的Electron配置提供一個(gè)通用的解決方案。環(huán)境配置 babel-core: ^6.26.0,

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀使用Electron構(gòu)建React+Webpack桌面應(yīng)用的方法:前言 Electron可以使用HTML、CSS、JavaScript構(gòu)建跨平臺(tái)桌面應(yīng)用，可是在使用到React和Webpack時(shí)，會(huì)遇到一些配置問題，本文將針對(duì)React+Webpack下的Electron配置提供一個(gè)通用的解決方案。環(huán)境配置 babel-core: ^6.26.0,

前言

Electron可以使用HTML、CSS、JavaScript構(gòu)建跨平臺(tái)桌面應(yīng)用，可是在使用到React和Webpack時(shí)，會(huì)遇到一些配置問題，本文將針對(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來定位bug，所以我們使用一個(gè)函數(shù)來切換各種環(huán)境：

module.exports = (env)=>{
 ******
 const isProduction = env==='production';
 ******
 devtool: isProduction ? 'source-map':'inline-source-map',

而我們?cè)趐ackage.json文件里，編寫以下命令：

"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

本次編寫的是一個(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

開始調(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í)我們打開應(yīng)用，會(huì)發(fā)現(xiàn)其在調(diào)試中的導(dǎo)航欄菜單均已消失，只有一個(gè)退出選項(xiàng)，這是因?yàn)槲覀儾]有設(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來監(jiān)測(cè)改變。只不過這樣我們需要對(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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

使用Electron構(gòu)建React+Webpack桌面應(yīng)用的方法

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：構(gòu)建桌面應(yīng)用 React

熱門焦點(diǎn)

使用Electron構(gòu)建React+Webpack桌面應(yīng)用的方法

使用Electron構(gòu)建React+Webpack桌面應(yīng)用的方法

使用Electron構(gòu)建React+Webpack桌面應(yīng)用的方法

最新推薦

猜你喜歡

熱門推薦