Comment Webpack crée des applications Electron

Cette fois, je vais vous montrer comment Webpack construit des applications Electron. Quelles sont les précautions pour que Webpack crée des applications Electron. Voici des cas pratiques, jetons un coup d'œil.

Electron vous permet d'utiliser la technologie de développement Web pour développer des applications de bureau multiplateformes. Il est dirigé et open source par Github. Les Editor familiers sont développés à l'aide d'Electron.

Electron est une combinaison de Node.js et du navigateur Chromium. Il utilise la page Web affichée par le navigateur Chromium comme application. GUI, via Node.js pour interagir avec le système d'exploitation. Quand tu es dans Electron Lorsque vous exploitez une fenêtre dans une application, vous exploitez en réalité une page Web. Lorsque votre opération doit être effectuée via le système d'exploitation, la page Web interagira avec le système d'exploitation via Node.js.

Les avantages de développer des applications de bureau de cette manière sont :

1. Pour abaisser le seuil de développement, il suffit de maîtriser la technologie de développement Web et Node.js. Un grand nombre de technologies de développement Web et de bibliothèques prêtes à l'emploi peuvent être réutilisées dans Electron

2. Depuis le navigateur Chromium ; et Node.js sont multiplateformes, Electron peut écrire un code à exécuter sur différents systèmes d'exploitation.

Lors de l'exécution d'une application Electron, elle commence par lancer un processus principal. Le processus principal est démarré par Node.js exécutant un fichier d'entrée JavaScript Le contenu de ce fichier d'entrée main.js est le suivant :

const { app, BrowserWindow } = require('electron')
// 保持一个对于 window 对象的全局引用，如果你不这样做，
// 当 JavaScript 对象被垃圾回收， window 会被自动地关闭
let win
// 打开主窗口
function createWindow() {
 // 创建浏览器窗口
 win = new BrowserWindow({ width: 800, height: 600 })
 // 加载应用的 index.html
 const indexPageURL = `file://${dirname}/dist/index.html`;
 win.loadURL(indexPageURL);
 // 当 window 被关闭，这个事件会被触发
 win.on('closed', () => {
  // 取消引用 window 对象
  win = null
 })
}
// Electron 会在创建浏览器窗口时调用这个函数。
app.on('ready', createWindow)
// 当全部窗口关闭时退出
app.on('window-all-closed', () => {
 // 在 macOS 上，除非用户用 Cmd + Q 确定地退出
 // 否则绝大部分应用会保持激活
 if (process.platform !== 'darwin') {
  app.quit()
 }
})

. Une fois le processus principal démarré, il restera toujours exécuté en arrière-plan. La fenêtre que vous voyez et utilisez n'est pas le processus principal, mais le sous-processus de fenêtre nouvellement démarré par le processus principal.

L'application comporte une série d'événements cycle de vie du démarrage à la sortie. La fonction electronic.app.on() est utilisée pour surveiller les événements du cycle de vie et réagir à des moments spécifiques. Par exemple, utilisez BrowserWindow pour afficher la fenêtre principale de l'application dans l'événement app.on('ready').

La fenêtre démarrée est en fait une page Web. Lorsqu'elle est démarrée, l'adresse de la page Web transmise dans loadURL sera chargée. Chaque fenêtre est un processus de page Web distinct et la communication entre les fenêtres nécessite l'utilisation du processus principal pour transmettre les messages.

De manière générale, le développement d'applications Electron est très similaire au développement d'applications Web. La différence est que l'environnement d'exécution d'Electron dispose d'un navigateur intégré et d'API Node.js. Lors du développement de pages Web, en plus d'utiliser les API fournies par le navigateur, vous pouvez. utilisez également l'API Node fournie par js.

Connectez-vous à Webpack

Ensuite, créez une application Electron simple, qui nécessite l'affichage d'une fenêtre principale après le démarrage de l'application. Après avoir cliqué sur ce bouton, une nouvelle fenêtre s'affichera et React sera utilisé pour développer. la page Web.

Puisque chaque fenêtre de l'application Electron correspond à une page web, deux pages web doivent être développées, à savoir l'index.html de la fenêtre principale et la fenêtre nouvellement ouverte. connexion.html. En d'autres termes, le projet se compose de 2 applications d'une seule page. Ceci est très similaire au projet de 3-10 Gestion de plusieurs applications d'une seule page. Transformons-le en un. Applications électroniques.

Les zones qui doivent être modifiées sont les suivantes :

Créez un nouveau fichier d'entrée main.js pour le processus principal dans le répertoire racine du projet. Le contenu est cohérent avec ce qui précède

. Le code de la page web de la fenêtre principale est le suivant :

import React, { Component } from 'react';
import { render } from 'react-dom';
import { remote } from 'electron';
import path from 'path';
import './index.css';
class App extends Component {
 // 在按钮被点击时
 handleBtnClick() {
  // 新窗口对应的页面的 URI 地址
  const modalPath = path.join('file://', remote.app.getAppPath(), 'dist/login.html');
  // 新窗口的大小
  let win = new remote.BrowserWindow({ width: 400, height: 320 })
  win.on('close', function () {
   // 窗口被关闭时清空资源
   win = null
  })
  // 加载网页
  win.loadURL(modalPath)
  // 显示窗口
  win.show()
 }
 render() {
  return (
   <p>
    <h1>Page Index</h1>
    <button onClick={this.handleBtnClick}>Open Page Login</button>
   </p>
  )
 }
}
render(<App/>, window.document.getElementById('app'));

La partie la plus critique consiste à utiliser l'API fournie par la bibliothèque électronique pour ouvrir une nouvelle fenêtre lors de l'événement de clic sur le bouton et charger l'adresse du fichier de la page Web.

Le code dans la partie page a été modifié. Ensuite, le code de construction sera modifié. Ici, vous devez faire ce qui suit pour construire :

Construire deux pages Web exécutables dans le navigateur, correspondant aux interfaces des deux fenêtres

1. Parce que le code JavaScript de la page Web peut appeler le module natif Node.js ou le module électronique, c'est-à-dire que le code de sortie dépend de ces modules. Cependant, étant donné que ces modules ont un support intégré, le code construit ne peut pas empaqueter ces modules.

2. Il est très facile de remplir les exigences ci-dessus car Webpack dispose d'un support intégré pour Electron. Ajoutez simplement une ligne de code au fichier de configuration Webpack , comme suit :

target: 'electron-renderer',

这句配置曾在2-7其它配置项-Target中提到，意思是指让 Webpack 构建出用于 Electron 渲染进程用的 JavaScript 代码，也就是这2个窗口需要的网页代码。

以上修改都完成后重新执行 Webpack 构建，对应的网页需要的代码都输出到了项目根目录下的 dist 目录里。

为了以 Electron 应用的形式运行，还需要安装新依赖：

# 安装 Electron 执行环境到项目中
npm i -D electron

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Angular实现可添加删除与计算总金额效果插件

Bootstrap模态框多次弹出提交BUG

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!