Wie Webpack Electron-Apps erstellt

Dieses Mal zeige ich Ihnen, wie Webpack Electron-Anwendungen erstellt. Was sind die Vorsichtsmaßnahmen für Webpack, um Electron-Anwendungen zu erstellen?

Electron ermöglicht Ihnen die Verwendung von Webentwicklungstechnologie zur Entwicklung plattformübergreifender Desktop-Anwendungen. Es wird von Github geleitet und ist Open Source. Der bekannte Atom- und VSCode-Editor wird mit Electron entwickelt. Electron ist eine Kombination aus Node.js und dem Chromium-Browser. Es verwendet die vom Chromium-Browser angezeigte Webseite als Anwendung GUI, über Node.js zur Interaktion mit dem Betriebssystem. Wenn Sie in Electron sind Wenn Sie ein Fenster in einer Anwendung bedienen, bedienen Sie tatsächlich eine Webseite. Wenn Ihr Vorgang über das Betriebssystem abgeschlossen werden muss, interagiert die Webseite über Node.js mit dem Betriebssystem.

Die Vorteile der Entwicklung von Desktop-Anwendungen auf diese Weise sind:

Um die Entwicklungsschwelle zu senken, müssen Sie nur die Webentwicklungstechnologie und Node.js beherrschen. Eine große Anzahl von Webentwicklungstechnologien und vorgefertigten Bibliotheken können in Electron wiederverwendet werden und Node.js sind plattformübergreifend. Electron kann einen Code schreiben, der auf verschiedenen Betriebssystemen ausgeführt werden kann.
2. Wenn eine Electron-Anwendung ausgeführt wird, startet sie zunächst einen Hauptprozess. Der Hauptprozess wird gestartet, indem Node.js eine Eintragsdatei

   JavaScript

   ausführt. Der Inhalt dieser
Eintragsdatei

main.js lautet wie folgt:

Nachdem der Hauptprozess gestartet wurde, läuft er immer im Hintergrund weiter. Das Fenster, das Sie sehen und bedienen, ist nicht der Hauptprozess, sondern der vom Hauptprozess neu gestartete Fenster-Unterprozess. Die Anwendung verfügt über eine Reihe von

Lebenszyklusereignissen

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()
 }
})

vom Start bis zum Beenden. Die Funktion electron.app.on() wird verwendet, um die Lebenszyklusereignisse zu überwachen und zu bestimmten Zeitpunkten zu reagieren. Verwenden Sie beispielsweise BrowserWindow, um das Hauptfenster der Anwendung im app.on('ready')-Ereignis anzuzeigen.

Das gestartete Fenster ist eigentlich eine Webseite und lädt beim Start die in LoadURL übergebene Webseitenadresse. Jedes Fenster ist ein separater Webseitenprozess, und die Kommunikation zwischen Fenstern erfordert die Verwendung des Hauptprozesses zur Weitergabe von Nachrichten.

Im Allgemeinen ist die Entwicklung von Electron-Anwendungen der Entwicklung von Webanwendungen sehr ähnlich. Der Unterschied besteht darin, dass die laufende Umgebung von Electron über integrierte Browser und Node.js-APIs verfügt. Bei der Entwicklung von Webseiten können Sie zusätzlich die vom Browser bereitgestellten APIs verwenden Verwenden Sie auch die von js bereitgestellte Node.-API.

Mit Webpack verbinden

Erstellen Sie als Nächstes eine einfache Electron-Anwendung, für die nach dem Start der Anwendung eine Schaltfläche angezeigt werden muss. Nach dem Klicken auf diese Schaltfläche wird ein neues Fenster angezeigt, und React wird zum Entwickeln verwendet die Webseite.

Da jedes Fenster in der Electron-Anwendung einer Webseite entspricht, müssen zwei Webseiten entwickelt werden, nämlich die index.html des Hauptfensters und die des neu geöffneten Fensters. login.html. Mit anderen Worten, das Projekt besteht aus zwei Einzelseitenanwendungen. Dies ist dem Projekt in 3-10 „Verwalten mehrerer Einzelseitenanwendungen“ sehr ähnlich Elektronenanwendungen.

Folgende Bereiche müssen geändert werden:

Erstellen Sie eine neue Eintragsdatei main.js für den Hauptprozess im Projektstammverzeichnis. Der Inhalt stimmt mit dem oben genannten überein Der Code der Hauptfenster-Webseite lautet wie folgt:

Der kritischste Teil besteht darin, die von der Elektronenbibliothek bereitgestellte API zu verwenden, um im Schaltflächenklickereignis ein neues Fenster zu öffnen und die Adresse der Webseitendatei zu laden.

Der Code im Seitenteil wurde geändert. Als Nächstes wird der Konstruktionscode geändert. Um hier zu bauen, müssen Sie Folgendes tun:

Erstellen Sie zwei Webseiten, die im Browser ausgeführt werden können und den Schnittstellen der beiden Fenster entsprechen Da der JavaScript-Code der Webseite möglicherweise das native Modul oder das Elektronenmodul von Node.js aufruft, hängt der Ausgabecode von diesen Modulen ab. Da diese Module jedoch über integrierte Unterstützung verfügen, kann der erstellte Code diese Module nicht packen.

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'));

Es ist sehr einfach, die oben genannten Anforderungen zu erfüllen, da Webpack über integrierte Unterstützung für Electron verfügt. Fügen Sie einfach eine Codezeile zur Webpack-

-Konfigurationsdatei

hinzu, wie folgt:

target: 'electron-renderer',

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

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

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

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

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

推荐阅读：

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

Bootstrap模态框多次弹出提交BUG

Das obige ist der detaillierte Inhalt vonWie Webpack Electron-Apps erstellt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!