Webpack で Electron アプリケーションを構築する方法

この記事では、主に Electron アプリケーションを構築するための Webpack の実際的な使用方法を紹介し、参考にしていきます。

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

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

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

1. Web 開発テクノロジと Node.js をマスターするだけで済み、多数の Web 開発テクノロジと既製のライブラリを再利用できます。 Electron 内;

2. Chromium ブラウザと Node.js は両方ともクロスプラットフォームであるため、Electron は異なるオペレーティング システムで実行するコードを作成できます。

Electron アプリケーションを実行するときは、メインプロセスを開始することによって開始されます。メインプロセスの起動は、Node.js を介してエントリ JavaScript ファイルを実行することによって実現されます。このエントリ ファイル 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 アプリケーションの開発と非常に似ていますが、Web ページを開発する際には、提供される API を使用するだけでなく、Electron オペレーティング環境に組み込みのブラウザーと Node.js API が含まれるという点が異なります。ブラウザからはNode.jsが提供するAPIを利用することもできます。

Webpackに接続します

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

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

変更が必要な箇所は以下の通りです:

メインプロセスの新しいエントリファイル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(&#39;app&#39;));

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

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

2 つのウィンドウのインターフェイスに対応する、ブラウザーで実行できる 2 つの Web ページを構築します。

1. の JavaScript コードで Node.js への呼び出しがある可能性があるためWeb ページのネイティブ モジュールまたは電子モジュール。つまり、出力コードはこれらのモジュールに依存します。ただし、これらのモジュールにはサポートが組み込まれているため、ビルドされたコードはこれらのモジュールをパッケージ化できません。

2. Webpack には Electron のサポートが組み込まれているため、上記の要件を完了するのは非常に簡単です。 次のように、Webpack 構成ファイルにコードを 1 行追加するだけです:

target: 'electron-renderer',

この構成は、「2-7 その他の構成項目 - ターゲット」で説明されています。これは、Webpack に Electron レンダリング プロセス用のプログラムを構築させることを意味します。 JavaScript コードは、これら 2 つのウィンドウに必要な Web ページ コードです。

上記の修正が完了したら、Webpackビルドを再実行すると、プロジェクトのルートディレクトリ配下のdistディレクトリに、該当するWebページに必要なコードが出力されます。

Electron アプリケーションとして実行するには、新しい依存関係をインストールする必要があります:

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

インストールが成功したら、プロジェクト ディレクトリで Electron を実行します。図に示すように、起動されたデスクトップ アプリケーションが正常に表示されます。

以上、皆様のお役に立てれば幸いです。

関連記事:

vue+springboot によるシングル サインオンのクロスドメイン問題の実装方法 (詳細なチュートリアル)

vueでスクローラーリターンページを実装し、スクロール位置を記憶する方法

vueでディープコピーを表示する方法

JavaScriptでCookieの読み書きを実装する方法

WeChatアプレットで複数のファイルを実装する方法ダウンロード

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