使用Electron建立React+Webpack桌面應用程式（詳細教學）-js教程-PHP中文網

首頁

web前端

js教程

使用Electron建立React+Webpack桌面應用程式（詳細教學）

亚连

Jun 20, 2018 pm 03:27 PM

react

本篇文章主要介紹了使用Electron建構React Webpack桌面應用程式的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

前言

Electron可以使用HTML、CSS、JavaScript建構跨平台桌面應用，可是在使用到React和Webpack時，會遇到一些設定問題，本文將針對React Webpack下的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打包，會產生一個很大的bundle文件，在桌面端比較影響性能，而調試的時候卻需要較快地生成bundle，可是又需要使用sourcemap來定位bug，所以我們使用一個函數來切換各種環境：

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',讓我們的App在調試時只能在Electron下運作。

React

本次寫的是一個簡單的顯示時間的App，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 id="timetext">{timetext}</h1>
   </p>
  );
 }
}
export default Time;

Electron

本次的App不涉及複雜的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:prod

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

yarn run electron

#開始偵錯：

使用Electron建立React+Webpack桌面應用程式（詳細教學）

意思為建構Mac桌面應用，並覆寫先前我們使用該指令建構的檔案。

等待一會兒會在目錄下看到建置好的資料夾，裡面便是我們的桌面應用程式。

而在這時我們開啟應用，會發現其在偵錯中的導覽列選單都已消失，只有一個退出選項，這是因為我們並沒有設定應用的選單列項目，Electron在建構App時會捨去調試的各種選單。

改進

大家應該注意到依照先前的方法，我們在除錯時每修改一次就要重複使用webpack打包，當然也可以使用webpack-dev-server來監測改變。只不過這樣我們需要對專案進行調整：

在index.js檔案裡修改loadURL為：

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

再運行：

yarn run electron

因為此時我們是檢測的webpack-dev-server下的文件，此時我們在專案中所做的修改就能即時在electron中看到了。

若調試和測試完成，只需要修改loadURL為：

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

即可進行下一步建置操作。

！注意，在建置最終應用程式前應該注意此時的web檔案是否在webpack-dev-server下運作，若是則應該使用webpack產生靜態打包檔。

本文專案文件地址：https://github.com/Voyager-One/react-webpack-electron

上面是我整理給大家的，希望今後對大家有幫助。

在React中詳細介紹受控元件與非受控元件

使用Angular如何實作基本購物車功能

在node.js中有關路由，中間件的詳細介紹說明

以上是使用Electron建立React+Webpack桌面應用程式（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。