Webpack が Electron アプリを構築する方法

今回は、Webpack が Electron アプリケーションを構築する方法と、Webpack が Electron アプリケーションを構築するための 注意事項 について説明します。実際のケースを見てみましょう。

Electron を使用すると、Web 開発テクノロジーを使用してクロスプラットフォームのデスクトップ アプリケーションを開発できます。これは、Github によって主導され、オープンソース化されています。Electron を使用して開発されています。

Electron は Node.js と Chromium ブラウザを組み合わせたもので、Chromium ブラウザで表示される Web ページをアプリケーションとして使用します。 GUI、Node.js を介してオペレーティング システムと対話します。 エレクトロンにいるとき アプリケーション内のウィンドウを操作するとき、実際には Web ページを操作していることになります。オペレーティング システムを通じて操作を完了する必要がある場合、Web ページは Node.js を通じてオペレーティング システムと対話します。

この方法でデスクトップ アプリケーションを開発する利点は次のとおりです:

開発の敷居を下げるには、Web 開発テクノロジと Node.js をマスターするだけで済みます。Electron では、多数の Web 開発テクノロジと既製のライブラリを再利用できます。 Electron はクロスプラットフォームで、さまざまなオペレーティング システム上で実行するコードを作成できます。

Electron アプリケーションを実行する場合、まずメイン プロセスを起動します。メインプロセスの起動は、エントリ
2. JavaScript

   ファイルを実行するために Node.js を通じて実装されます。この

   エントリ ファイル
main.js の内容は次のとおりです:

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

メインプロセスが起動された後は、常にバックグラウンドで実行されます。表示および操作しているウィンドウは、メインプロセスではなく、メインプロセスによって新たに起動されたウィンドウのサブプロセスです。 アプリケーションには、起動から終了までの一連の ライフ サイクル イベントがあり、electron.app.on() 関数は、ライフ サイクル イベントを監視し、特定の瞬間に反応するために使用されます。 たとえば、BrowserWindow を使用して、app.on('ready') イベントでアプリケーションのメイン ウィンドウを表示します。

起動されるウィンドウは実際には Web ページであり、起動時にloadURL に渡された Web ページのアドレスを読み込みます。 各ウィンドウは個別の Web ページ プロセスであり、ウィンドウ間の通信にはメイン プロセスを使用してメッセージを渡す必要があります。

一般に、Electron アプリケーションの開発は Web アプリケーションの開発と非常に似ています。違いは、Electron の実行環境にはブラウザーが提供する API を使用するだけでなく、ブラウザーと Node.js API が組み込まれている点です。 jsが提供するNode.APIも使用します。

Webpackに接続する

次に、簡単な Electron アプリケーションを作成します。アプリケーションを起動すると、メイン ウィンドウが表示されます。このボタンをクリックすると、新しいウィンドウが表示されます。React を使用して開発します。ウェブページ。

Electron アプリケーションの各ウィンドウは Web ページに対応するため、2 つの Web ページ、つまりメイン ウィンドウのindex.html と新しく開くウィンドウを開発する必要があります。 ログイン.html。 つまり、このプロジェクトは 2 つのシングルページ アプリケーションで構成されており、これは「3-10 複数のシングルページ アプリケーションの管理」のプロジェクトと非常によく似ています。 電子アプリケーション。 変更する必要がある箇所は次のとおりです:

プロジェクトのルート ディレクトリに main プロセスの新しいエントリ ファイル main.js を作成します。内容は上記と同じです。 メインウィンドウのWebページのコードは次のとおりです:

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

最も重要な部分は、電子ライブラリによって提供される API を使用して、ボタンのクリック イベントで新しいウィンドウを開き、Web ページ ファイルのアドレスをロードすることです。

ページ部分のコードが変更されました。 次に構築コードを変更します。 ここでビルドするには、次のことを行う必要があります:

2 つのウィンドウのインターフェースに対応して、ブラウザーで実行できる 2 つの Web ページを構築します。 Web ページの JavaScript コードは Node.js ネイティブ モジュールまたは Electron モジュールを呼び出す可能性があるため、つまり、出力コードはこれらのモジュールに依存します。ただし、これらのモジュールにはサポートが組み込まれているため、ビルドされたコードはこれらのモジュールをパッケージ化できません。

Webpack には Electron のサポートが組み込まれているため、上記の要件を完了するのは非常に簡単です。 次のように、Webpack

設定ファイル

にコード行を追加するだけです:

target: 'electron-renderer',

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

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

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

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

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

推荐阅读：

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

Bootstrap模态框多次弹出提交BUG

以上がWebpack が Electron アプリを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。