首頁 > 文章 > web前端 > Electron建構React、Webpack桌面應用教學

Electron建構React、Webpack桌面應用教學

小云云原創: 2017-12-18 09:59:542802瀏覽

Electron可以使用HTML、CSS、JavaScript來建立跨平台桌面應用，可是使用到React和Webpack時，會遇到一些設定問題，本文將針對React+Webpack下的Electron配置提供一個通用的解決方案。本文主要介紹了使用Electron建構React+Webpack桌面應用的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

環境設定

  "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>{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

開始偵錯：

建構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-dev-server下的文件，此時我們在專案中做的修改就能即時在electron中看到了。

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

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

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

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

Electron建構React、Webpack桌面應用教學

相關文章