Electron を使用して React+Webpack デスクトップアプリケーションを構築する (詳細なチュートリアル)-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Electron を使用して React+Webpack デスクトップアプリケーションを構築する (詳細なチュートリアル)

亚连

Jun 20, 2018 pm 03:27 PM

react

この記事では、主に Electron を使用して React+Webpack デスクトップアプリケーションを構築する方法を紹介します。編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして一緒に見てみましょう

前書き

Electron は HTML、CSS、JavaScript を使用してクロスプラットフォームのデスクトップアプリケーションを構築できますが、React と Webpack を使用する場合、いくつかの構成の問題が発生します。 Webpack はユニバーサルソリューションを提供するため、React+ Electron の構成に焦点を当てます。

環境構成

  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "babel-plugin-transform-class-properties": "^6.24.1",
  "babel-plugin-transform-object-rest-spread": "^6.26.0",
  "babel-preset-env": "^1.6.1",
  "babel-preset-react": "^6.24.1",
  "css-loader": "^0.28.7",
  "electron": "^1.7.9",
  "electron-packager": "^10.1.0",
  "extract-text-webpack-plugin": "^3.0.2",
  "node-sass": "^4.7.2",
  "react": "^16.2.0",
  "react-dom": "^16.2.0",
  "sass-loader": "^6.0.6",
  "style-loader": "^0.19.1",
  "webpack": "^3.10.0",
  "webpack-dev-server": "^2.9.7"

ログイン後にコピー

webpack.config.jsを構成します

デフォルトのWebpackパッケージを使用するため、大きなバンドルファイルが生成され、デスクトップ上のパフォーマンスに影響しますが、デバッグ中に生成を高速化する必要があります。ローカルにバンドルしますが、バグを見つけるにはソースマップを使用する必要があるため、さまざまな環境を切り替える関数を使用します:

module.exports = (env)=>{
 ******
 const isProduction = env===&#39;production&#39;;
 ******
 devtool: isProduction ? &#39;source-map&#39;:&#39;inline-source-map&#39;,

ログイン後にコピー

そして、package.json ファイルに次のコマンドを記述します:

"build:dev": "webpack",
"build:prod":"webpack -p --env production",

ログイン後にコピー

より適切に環境を切り替えるには。

以下は webpack.config.js 全体です:

const webpack = require(&#39;webpack&#39;);
const path = require(&#39;path&#39;);
const ExtractTextPlugin = require(&#39;extract-text-webpack-plugin&#39;);
module.exports = (env)=>{
 const isProduction = env===&#39;production&#39;;
 const CSSExtract = new ExtractTextPlugin(&#39;styles.css&#39;);
 console.log(&#39;env=&#39;+env);
 return {
  entry:&#39;./src/app.js&#39;,
  target: &#39;electron-renderer&#39;,
  output:{
   path:path.join(__dirname, &#39;public&#39;,&#39;dist&#39;),
   filename:&#39;bundle.js&#39;
  },
  module:{
   rules:[{
    loader: &#39;babel-loader&#39;,
    test: /\.js(x)?$/,
    exclude: /node_modules/
   }, {
    test: /\.s?css$/,
    use:CSSExtract.extract({
     use:[
      {
       loader:&#39;css-loader&#39;,
       options:{
        sourceMap:true
       }
      },
      {
       loader:&#39;sass-loader&#39;,
       options:{
        sourceMap:true
       }
      }
     ]
    })
   }]
  },
  plugins:[
   CSSExtract
  ],
  devtool: isProduction ? &#39;source-map&#39;:&#39;inline-source-map&#39;,
  devServer:{
   contentBase: path.join(__dirname, &#39;public&#39;),
   historyApiFallback:true,
   publicPath:&#39;/dist/&#39;
  }
 };
}

ログイン後にコピー

注: target: 'electron-renderer' なので、アプリはデバッグ中に Electron でのみ機能します。

React

今回は時間を表示する簡単なアプリを書きました。Reactモジュールは次のとおりです:

import React from &#39;react&#39;;
class Time extends React.Component{
 state = {
  time:&#39;&#39;
 }
 getTime(){
  let date = new Date();
  let Year = date.getFullYear();
  let Month = date.getMonth();
  let Day = date.getDate();
  let Hour = date.getHours();
  let Minute = date.getMinutes();
  let Seconds = date.getSeconds();
  let time = Year+&#39;年&#39;+Month+&#39;月&#39;+Day+&#39;日&#39;+Hour+&#39;:&#39;+Minute+&#39;:&#39;+Seconds;
  return time;
 }
 componentDidMount(){
  setInterval(()=>{
   this.setState(()=>{
    return {
     time:this.getTime()
    }
   });
  },1000);
 }
 render(){
  let timetext = this.state.time;
  return (
   <p>
    <h1>{timetext}</h1>
   </p>
  );
 }
}
export default Time;

ログイン後にコピー

Electron

このアプリには複雑なElectron APIは含まれておらず、単なる表示用のコンテナです。

const electron = require(&#39;electron&#39;);
const {app,BrowserWindow} = electron;
let mainWindow = electron;
app.on(&#39;ready&#39;,()=>{
 mainWindow = new BrowserWindow({});
 mainWindow.loadURL(`file://${__dirname}/public/index.html`);
});

ログイン後にコピー

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>React-Webpack-Electron</title>
 <link rel="stylesheet" type="text/css" href="./dist/styles.css" rel="external nofollow" >
</head>
<body>
 <p id="app"></p>
 <script src="./dist/bundle.js"></script>
</body>
</html>

ログイン後にコピー

webpackでパッケージ化したjsとcssをhtmlに読み込みます。

デバッグ

yarn run build:prodyarn run build:prod

首先我们用webpack打包文件，在dist/下生成bundle.js和style.css

yarn run electron

开始调试：

构建App

我们在package.json文件里添加如下命令：

"packager": "electron-packager . --platform=darwin --electron-version=1.7.9 --overwrite"

意思为构建Mac桌面应用，并覆盖之前我们使用该命令构建的文件。

等待一会儿会在目录下看到构建好的文件夹，里面便是我们的桌面应用。

而在这时我们打开应用，会发现其在调试中的导航栏菜单均已消失，只有一个退出选项，这是因为我们并没有设置应用的菜单栏项目，Electron在构建App时会舍去调试的各种菜单。

改进

大家应该注意到按照之前的方法，我们在调试时每修改一次就要重用webpack打包，当然也可以使用webpack-dev-server来监测改变。只不过这样我们需要对项目进行调整：

在index.js文件里修改loadURL为：

mainWindow.loadURL(`http://localhost:8080/index.html`);

ログイン後にコピー

再运行：

yarn run electron

まず、webpack を使用してファイルをパッケージ化し、dist/

yarn run electric< の下に Bundle.js と style.css を生成します。 /code code><p></p> デバッグの開始: <p><p   style="max-width:90%"><img src="https://img.php.cn/upload/article/000/000/008/313e306ae672c469b2f4217247c0baf6-0 .png "    style="max-width:90%"  style="max-width:90%" alt=""/></p><p></p>アプリを構築する<p></p><p>次のコマンドを package.json ファイルに追加します: </p><p><code>"packager": "electron -packager . --platform=darwin --electron-version=1.7.9 --overwrite"

は、Mac デスクトップアプリケーションをビルドし、以前にこのコマンドを使用してビルドしたファイルを上書きすることを意味します。しばらく待つと、ディレクトリに構築されたフォルダーが表示されます。これがデスクトップアプリケーションです。

この時点で、アプリケーションを開くと、デバッグ中のナビゲーションバーメニューが消えており、終了オプションが 1 つしかないことがわかります。これは、アプリケーションのメニューバー項目と Electron を設定していないためです。アプリのビルド時に破棄されます。デバッグ用のさまざまなメニューがあります。

改善点

前述の方法によれば、デバッグ中に変更するたびに webpack パッケージを再利用する必要があることに誰もが気づくはずです。もちろん、変更を監視するために webpack-dev-server を使用することもできます。プロジェクトを調整する必要があるだけです: 🎜🎜index.js ファイルのloadURLを次のように変更します: 🎜

mainWindow.loadURL(`file://${__dirname}/public/index.html`);

ログイン後にコピー

🎜 次に実行します: 🎜🎜yarn run electric🎜🎜この時点で検出しているためwebpack -files は dev-server の下にあります。この時点で、プロジェクトに加えた変更は Electron でリアルタイムに確認できます。 🎜🎜デバッグとテストが完了したら、次のビルド操作に進むには、loadURL を 🎜rrreee🎜 に変更するだけです。 🎜🎜！最終的なアプリケーションを構築する前に、現時点で Web ファイルが webpack-dev-server で実行されているかどうかに注意する必要があります。実行されている場合は、webpack を使用して静的パッケージファイルを生成する必要があります。 🎜🎜この記事のプロジェクトファイルアドレス: https://github.com/Voyager-One/react-webpack-electron🎜🎜 以上は皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。 🎜🎜関連記事: 🎜🎜🎜Reactの制御コンポーネントと非制御コンポーネントの詳細な紹介🎜🎜🎜🎜Angularを使用して基本的なショッピングカート機能を実装する方法🎜🎜🎜🎜node.jsのルーティングとミドルウェアの詳細な紹介🎜🎜

以上がElectron を使用して React+Webpack デスクトップアプリケーションを構築する (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7487

CakePHP チュートリアル

1377

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

React と WebSocket を使用してリアルタイムチャットアプリを構築する方法 Sep 26, 2023 pm 07:46 PM

React と WebSocket を使用してリアルタイムチャットアプリケーションを構築する方法はじめに: インターネットの急速な発展に伴い、リアルタイムコミュニケーションがますます注目を集めています。ライブチャットアプリは、現代の社会生活や仕事生活に不可欠な部分になっています。この記事では、React と WebSocket を使用して簡単なリアルタイムチャットアプリケーションを構築する方法と、具体的なコード例を紹介します。 1. 技術的な準備リアルタイムチャットアプリケーションの構築を開始する前に、次のテクノロジとツールを準備する必要があります。 React: 構築用の 1 つ

React フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法 Sep 28, 2023 am 10:48 AM

React フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法、特定のコード例が必要です今日の Web 開発環境では、フロントエンドとバックエンドの分離がトレンドになっています。フロントエンドコードとバックエンドコードを分離することで、開発作業がより柔軟かつ効率的になり、チームのコラボレーションが促進されます。この記事では、React を使用してフロントエンドとバックエンドの分離を実現し、それによって分離と独立したデプロイの目標を達成する方法を紹介します。まず、フロントエンドとバックエンドの分離とは何かを理解する必要があります。従来の Web 開発モデルでは、フロントエンドとバックエンドが結合されています。

React と Flask を使用してシンプルで使いやすい Web アプリケーションを構築する方法 Sep 27, 2023 am 11:09 AM

React と Flask を使用してシンプルで使いやすい Web アプリケーションを構築する方法はじめに: インターネットの発展に伴い、Web アプリケーションのニーズはますます多様化および複雑化しています。使いやすさとパフォーマンスに対するユーザーの要件を満たすために、最新のテクノロジースタックを使用してネットワークアプリケーションを構築することがますます重要になっています。 React と Flask は、フロントエンドおよびバックエンド開発用の 2 つの非常に人気のあるフレームワークであり、うまく連携してシンプルで使いやすい Web アプリケーションを構築します。この記事では、React と Flask を活用する方法について詳しく説明します。

React レスポンシブデザインガイド: アダプティブフロントエンドレイアウト効果を実現する方法 Sep 26, 2023 am 11:34 AM

React レスポンシブデザインガイド: アダプティブフロントエンドレイアウト効果を実現する方法モバイルデバイスの人気と、マルチスクリーンエクスペリエンスに対するユーザーの需要の高まりに伴い、レスポンシブデザインは最新のフロントエンド開発における重要な考慮事項の 1 つとなっています。 React は、現在最も人気のあるフロントエンドフレームワークの 1 つであり、開発者がアダプティブレイアウト効果を実現するのに役立つ豊富なツールとコンポーネントを提供します。この記事では、React を使用してレスポンシブデザインを実装するためのガイドラインとヒントをいくつか紹介し、参考として具体的なコード例を示します。 Reactを使用したファイル

React と RabbitMQ を使用して信頼性の高いメッセージングアプリを構築する方法 Sep 28, 2023 pm 08:24 PM

React と RabbitMQ を使用して信頼性の高いメッセージングアプリケーションを構築する方法はじめに: 最新のアプリケーションは、リアルタイム更新やデータ同期などの機能を実現するために、信頼性の高いメッセージングをサポートする必要があります。 React はユーザーインターフェイスを構築するための人気のある JavaScript ライブラリであり、RabbitMQ は信頼性の高いメッセージングミドルウェアです。この記事では、React と RabbitMQ を組み合わせて信頼性の高いメッセージングアプリケーションを構築する方法を紹介し、具体的なコード例を示します。 RabbitMQ の概要:

React コードデバッグガイド: フロントエンドのバグをすばやく見つけて解決する方法 Sep 26, 2023 pm 02:25 PM

React コードデバッグガイド: フロントエンドのバグをすばやく見つけて解決する方法はじめに: React アプリケーションを開発するとき、アプリケーションをクラッシュさせたり、不正な動作を引き起こしたりする可能性のあるさまざまなバグに遭遇することがよくあります。したがって、デバッグスキルを習得することは、すべての React 開発者にとって不可欠な能力です。この記事では、フロントエンドのバグを見つけて解決するための実践的なテクニックをいくつか紹介し、読者が React アプリケーションのバグをすばやく見つけて解決できるようにする具体的なコード例を示します。 1. デバッグツールの選択: In Re

React Router ユーザーガイド: フロントエンドルーティング制御の実装方法 Sep 29, 2023 pm 05:45 PM

ReactRouter ユーザーガイド: フロントエンドルーティング制御の実装方法シングルページアプリケーションの人気に伴い、フロントエンドルーティングは無視できない重要な部分になりました。 React エコシステムで最も人気のあるルーティングライブラリとして、ReactRouter は豊富な機能と使いやすい API を提供し、フロントエンドルーティングの実装を非常にシンプルかつ柔軟にします。この記事では、ReactRouter の使用方法と具体的なコード例を紹介します。 ReactRouter を最初にインストールするには、次のものが必要です

React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法 Sep 26, 2023 pm 06:12 PM

React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法はじめに: 今日の情報爆発の時代において、データ分析はさまざまな業界で不可欠なリンクとなっています。中でも、高速かつ効率的なデータ分析アプリケーションを構築することは、多くの企業や個人が追求する目標となっています。この記事では、React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法を紹介し、詳細なコード例を示します。 1. 概要 React はビルドするためのツールです

See all articles

Electron を使用して React+Webpack デスクトップ アプリケーションを構築する (詳細なチュートリアル)

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

Electron を使用して React+Webpack デスクトップアプリケーションを構築する (詳細なチュートリアル)