Tutorial zum Erstellen von React- und Webpack-Desktopanwendungen mit Electron

Electron kann HTML, CSS und JavaScript verwenden, um plattformübergreifende Desktop-Anwendungen zu erstellen. Bei der Verwendung von React und Webpack treten jedoch einige Konfigurationsprobleme auf. Dieser Artikel bietet eine allgemeine Lösung für die Electron-Konfiguration unter React+Webpack. In diesem Artikel wird hauptsächlich die Methode zur Verwendung von Electron zum Erstellen von React+Webpack-Desktopanwendungen vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Umgebungskonfiguration

  "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"

Konfiguration webpack.config.js

Da die Standard-Webpack-Verpackung verwendet wird, wird eine große Bundle-Datei generiert, was sich auf die Leistung auf dem Desktop auswirkt. Das Bundle muss jedoch während des Debuggens schnell generiert werden, aber zum Auffinden von Fehlern ist eine Quellkarte erforderlich, daher verwenden wir eine Funktion zum Wechseln verschiedene Umgebungen:

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

Und wir schreiben den folgenden Befehl in die Datei package.json:

"build:dev": "webpack",
"build:prod":"webpack -p --env production",

Sie können die Umgebung besser wechseln.

Das Folgende ist die gesamte 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/'
  }
 };
}

Hinweis: Ziel: 'electron-renderer', let our App Es funktioniert nur unter Electron beim Debuggen.

Reagieren

Dieses Mal habe ich eine einfache App zur Zeitanzeige geschrieben:

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

Diese App beinhaltet nicht die komplexe Electron-API, sondern ist lediglich ein Container zur Anzeige:

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>

Wir laden die von Webpack gepackten JS- und CSS-Dateien in HTML.

Debugging

yarn run build:prod

Zuerst verwenden wir Webpack, um die Dateien zu packen und bundle.js und style.css unter dist zu generieren /

yarn run electron

Debuggen starten:

App erstellen

Wir fügen der Datei package.json den folgenden Befehl hinzu:

"packager": "electron-packager . --platform=darwin --electron-version=1.7.9 --overwrite"

, was bedeutet, dass die Mac-Desktopanwendung erstellt und der vorherige Build mit überschrieben werden soll diese Befehlsdatei.

Warten Sie eine Weile und Sie werden den erstellten Ordner im Verzeichnis sehen, bei dem es sich um unsere Desktop-Anwendung handelt.

Zu diesem Zeitpunkt werden wir beim Öffnen der Anwendung feststellen, dass das Navigationsleistenmenü während des Debuggens verschwunden ist und es nur eine Exit-Option gibt. Dies liegt daran, dass wir Wenn Sie die Menüleistenelemente der Anwendung nicht eingerichtet haben, verwirft Electron beim Erstellen der App verschiedene Menüs zum Debuggen.

Verbesserungen

Jeder sollte beachten, dass wir gemäß der vorherigen Methode die Webpack-Verpackung jedes Mal wiederverwenden müssen, wenn wir sie während des Debuggens ändern kann auch webpack-dev-server verwenden, um Änderungen zu überwachen. Wir müssen lediglich das Projekt anpassen:

Ändern Sie die LoadURL in der Datei index.js in:

mainWindow.loadURL(`http://localhost:8080/index.html`);

Erneut ausführen:

yarn run electron

Da wir zu diesem Zeitpunkt die Dateien unter webpack-dev-server erkennen, nehmen wir an dieser Stelle im Projekt Änderungen vor Zeit sind Sie können es in Echtzeit in Elektronen sehen.

Wenn das Debuggen und Testen abgeschlossen ist, müssen Sie nur die Lade-URL ändern in:

mainWindow.loadURL(`file://${__dirname}/public/index.html`);

, um mit dem fortzufahren nächster Build-Vorgang.

Beachten Sie, dass Sie vor dem Erstellen der endgültigen Anwendung darauf achten sollten, ob die Webdatei zu diesem Zeitpunkt unter webpack-dev-server ausgeführt wird. Wenn ja, sollten Sie Webpack verwenden, um statische Verpackungsdateien zu generieren.

Verwandte Empfehlungen:

Detaillierte Einführung in die JavaScript-Entwicklung plattformübergreifender Desktop-Anwendungen (Bilder und Text)

Bilder von XML- basierte Desktop-Anwendungen Detaillierte Einführung in den Textcode

Verwenden von Elektron zum Schreiben von Desktop-Anwendungen_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonTutorial zum Erstellen von React- und Webpack-Desktopanwendungen mit Electron. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!