Webpack実践構築電子活用事例詳細解説-jsチュートリアル-php.cn

Webpack実践構築電子活用事例詳細解説

小云云

リリース： 2017-12-25 16:34:57

オリジナル

2459 人が閲覧しました

Electron を使用すると、Web 開発テクノロジーを使用してクロスプラットフォームのデスクトップアプリケーションを開発できます。これは、Github とオープンソースによって主導され、Electron を使用して開発されます。この記事では、主に Electron アプリケーションを構築するための Webpack の実践的な使用方法を紹介します。編集者はこれが非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

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

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

Web 開発テクノロジと Node.js をマスターするだけで済み、多数の Web 開発テクノロジと既製のライブラリを再利用できます。 Electron 内;
Chromium ブラウザと Node.js は両方ともクロスプラットフォームであるため、Electron は異なるオペレーティングシステムで実行するコードを作成できます。

Electron アプリケーションを実行するときは、メインプロセスを開始することによって開始されます。メインプロセスの起動は、Node.js を介してエントリ JavaScript ファイルを実行することによって実現されます。このエントリファイル main.js の内容は次のとおりです。使用・操作するウィンドウはメインプロセスではなく、メインプロセスによって新たに起動されるウィンドウサブプロセスです。

アプリケーションには起動から終了までの一連のライフサイクルイベントがあり、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 ページは次のとおりです:

const { app, BrowserWindow } = require(&#39;electron&#39;)
// 保持一个对于 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(&#39;closed&#39;, () => {
  // 取消引用 window 对象
  win = null
 })
}

// Electron 会在创建浏览器窗口时调用这个函数。
app.on(&#39;ready&#39;, createWindow)

// 当全部窗口关闭时退出
app.on(&#39;window-all-closed&#39;, () => {
 // 在 macOS 上，除非用户用 Cmd + Q 确定地退出
 // 否则绝大部分应用会保持激活
 if (process.platform !== &#39;darwin&#39;) {
  app.quit()
 }
})

ログイン後にコピー

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

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

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

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

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

import React, { Component } from &#39;react&#39;;
import { render } from &#39;react-dom&#39;;
import { remote } from &#39;electron&#39;;
import path from &#39;path&#39;;
import &#39;./index.css&#39;;
class App extends Component {
 // 在按钮被点击时
 handleBtnClick() {
  // 新窗口对应的页面的 URI 地址
  const modalPath = path.join(&#39;file://&#39;, remote.app.getAppPath(), &#39;dist/login.html&#39;);
  // 新窗口的大小
  let win = new remote.BrowserWindow({ width: 400, height: 320 })
  win.on(&#39;close&#39;, 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;));

ログイン後にコピー