Erstellen Sie eine React+Webpack-Desktopanwendung mit Electron (ausführliches Tutorial)

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 Editor und werfen wir einen Blick darauf.

Vorwort

Electron kann HTML, CSS und JavaScript verwenden, um plattformübergreifende Desktop-Anwendungen zu erstellen, aber bei Verwendung von React und Webpack, Sie werden auf einige Konfigurationsprobleme stoßen. Dieser Artikel bietet eine allgemeine Lösung für die Electron-Konfiguration unter React+Webpack.

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

Aufgrund der Verwendung der Standard-Webpack-Verpackung ist eine sehr große Große Bundle-Dateien wirken sich auf die Leistung auf dem Desktop aus. Beim Debuggen müssen Bundles jedoch schnell generiert werden, aber Quellkarten müssen zum Auffinden von Fehlern verwendet werden. Daher verwenden wir eine Funktion zum Wechseln zwischen verschiedenen Umgebungen:

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

In die Datei package.json schreiben wir den folgenden Befehl:

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

, um die Umgebung besser zu wechseln.

Die folgenden sind alle 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', sodass unsere App während des Debuggens nur unter Electron funktionieren kann.

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 keine komplexe Electron-API, sie ist nur 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 das vom Webpack gepackte JS und CSS 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 sind im Paket .json-Datei Fügen Sie den folgenden Befehl hinzu:

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

, was bedeutet, dass die Mac-Desktopanwendung erstellt und die Dateien überschrieben werden, die wir zuvor mit diesem Befehl erstellt haben.

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 Debugging-Menüs.

Verbesserungen

Jeder sollte beachten, dass wir gemäß der vorherigen Methode jedes Mal, wenn wir sie während des Debuggens ändern, die Webpack-Verpackung wiederverwenden müssen webpack-dev-server zur Überwachung von Änderungen. Es ist nur so, dass wir das Projekt anpassen müssen:

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

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

Dann führen Sie Folgendes aus:

yarn run electron

Da wir derzeit Dateien unter webpack-dev-server erkennen, können die von uns im Projekt vorgenommenen Änderungen in Echtzeit in Electron angezeigt werden.

Wenn das Debuggen und Testen abgeschlossen ist, müssen Sie nur die LoadURL in

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

ändern, um mit dem nächsten Build-Vorgang fortzufahren.

! 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.

Die Projektdateiadresse dieses Artikels: https://github.com/Voyager-One/react-webpack-electron

Das Obige habe ich für alle zusammengestellt, ich hoffe, dass es so ist in Zukunft für alle hilfreich sein.

Verwandte Artikel:

Eine detaillierte Einführung in kontrollierte und unkontrollierte Komponenten in React

So implementieren Sie einen einfachen Warenkorb mithilfe der Angular-Funktion

Detaillierte Einführung in Routing und Middleware in node.js

Das obige ist der detaillierte Inhalt vonErstellen Sie eine React+Webpack-Desktopanwendung mit Electron (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!