Tutoriel sur la création d'applications de bureau React et Webpack avec Electron-js tutoriel-php.cn

Tutoriel sur la création d'applications de bureau React et Webpack avec Electron

小云云

Libérer： 2017-12-18 09:59:54

original

2825 Les gens l'ont consulté

Electron peut utiliser HTML, CSS et JavaScript pour créer des applications de bureau multiplateformes. Cependant, lorsque vous utilisez React et Webpack, vous rencontrerez certains problèmes de configuration. Cet article fournira une solution générale pour la configuration d'Electron sous React+Webpack. Cet article présente principalement la méthode d'utilisation d'Electron pour créer des applications de bureau React+Webpack. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Configuration de l'environnement

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

Copier après la connexion

Configuration webpack.config.js

Étant donné que l'empaquetage Webpack par défaut est utilisé, un gros fichier de bundle sera généré, ce qui affecte les performances sur le bureau. Cependant, lors du débogage, le bundle doit être généré rapidement, mais le mappage source est nécessaire pour localiser les bogues, nous utilisons donc une fonction pour. Changer d'environnement :

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

Copier après la connexion

Et nous écrivons la commande suivante dans le fichier package.json :

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

Copier après la connexion

Vous pouvez mieux changer d'environnement.

Ce qui suit est l'intégralité du webpack.config.js :

const webpack = require(&#39;webpack&#39;);
const path = require(&#39;path&#39;);
const ExtractTextPlugin = require(&#39;extract-text-webpack-plugin&#39;);
module.exports = (env)=>{
 const isProduction = env===&#39;production&#39;;
 const CSSExtract = new ExtractTextPlugin(&#39;styles.css&#39;);
 console.log(&#39;env=&#39;+env);
 return {
  entry:&#39;./src/app.js&#39;,
  target: &#39;electron-renderer&#39;,
  output:{
   path:path.join(__dirname, &#39;public&#39;,&#39;dist&#39;),
   filename:&#39;bundle.js&#39;
  },
  module:{
   rules:[{
    loader: &#39;babel-loader&#39;,
    test: /\.js(x)?$/,
    exclude: /node_modules/
   }, {
    test: /\.s?css$/,
    use:CSSExtract.extract({
     use:[
      {
       loader:&#39;css-loader&#39;,
       options:{
        sourceMap:true
       }
      },
      {
       loader:&#39;sass-loader&#39;,
       options:{
        sourceMap:true
       }
      }
     ]
    })
   }]
  },
  plugins:[
   CSSExtract
  ],
  devtool: isProduction ? &#39;source-map&#39;:&#39;inline-source-map&#39;,
  devServer:{
   contentBase: path.join(__dirname, &#39;public&#39;),
   historyApiFallback:true,
   publicPath:&#39;/dist/&#39;
  }
 };
}

Copier après la connexion

Remarque : cible : 'electron-renderer', laissez notre App Cela ne fonctionne que sous Electron lors du débogage.

React

Cette fois, j'ai écrit une application simple pour afficher l'heure. Le module React est le suivant :

<. 🎜 >

import React from &#39;react&#39;;
class Time extends React.Component{
 state = {
  time:&#39;&#39;
 }
 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+&#39;年&#39;+Month+&#39;月&#39;+Day+&#39;日&#39;+Hour+&#39;:&#39;+Minute+&#39;:&#39;+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;

Copier après la connexion

Electron

Cette application n'implique pas l'API complexe Electron, c'est juste un conteneur pour l'affichage :

const electron = require(&#39;electron&#39;);
const {app,BrowserWindow} = electron;
let mainWindow = electron;
app.on(&#39;ready&#39;,()=>{
 mainWindow = new BrowserWindow({});
 mainWindow.loadURL(`file://${__dirname}/public/index.html`);
});

Copier après la connexion

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>

Copier après la connexion

Nous chargeons les js et css packagés par webpack en html.

Débogage

yarn run build:prod

Nous utilisons d'abord Webpack pour empaqueter les fichiers et générer bundle.js et style.css sous dist /

yarn run electron

Démarrer le débogage :

Créer l'application

Nous ajoutons la commande suivante au fichier package.json :

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

ce qui signifie créer l'application de bureau Mac et écraser la version précédente en utilisant ce fichier de commandes.

Attendez un moment et vous verrez le dossier construit dans le répertoire, qui est notre application de bureau.

À ce moment-là, lorsque nous ouvrons l'application, nous constaterons que le menu de sa barre de navigation pendant le débogage a disparu et qu'il n'y a qu'une seule option de sortie. Si vous n'avez pas configuré les éléments de la barre de menu de l'application, Electron supprimera divers menus de débogage lors de la création de l'application.

Améliorations

Tout le monde devrait remarquer que selon la méthode précédente, nous devons réutiliser le packaging du webpack à chaque fois que nous le modifions pendant le débogage. peut également utiliser webpack-dev-server pour surveiller les modifications. C'est juste que nous devons ajuster le projet :

Modifiez l'URL de chargement dans le fichier index.js en :

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

Copier après la connexion

Exécutez à nouveau :

yarn run electron

Parce qu'à ce moment nous détectons les fichiers sous webpack-dev-server, les modifications que nous apportons dans le projet à ce moment le temps est Vous pouvez le voir en électron en temps réel.

Si le débogage et les tests sont terminés, il vous suffit de modifier l'URL de chargement en :

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

Copier après la connexion

pour procéder au prochaine opération de construction.

Notez qu'avant de créer l'application finale, vous devez faire attention à savoir si le fichier Web s'exécute actuellement sous webpack-dev-server. Si tel est le cas, vous devez utiliser webpack pour générer des fichiers d'empaquetage statiques.

Recommandations associées :

Introduction détaillée au développement JavaScript d'applications de bureau multiplateformes (images et texte)

Images de XML- applications de bureau basées sur Introduction détaillée du code texte

Utilisation d'électrons pour écrire des applications de bureau_html/css_WEB-ITnose

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!