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==='production'; ****** devtool: isProduction ? 'source-map':'inline-source-map',而我們在package.json檔案裡,寫下列指令:
"build:dev": "webpack", "build:prod":"webpack -p --env production",就可以較好的切換環境。
const webpack = require('webpack'); const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = (env)=>{ const isProduction = env==='production'; const CSSExtract = new ExtractTextPlugin('styles.css'); console.log('env='+env); return { entry:'./src/app.js', target: 'electron-renderer', output:{ path:path.join(__dirname, 'public','dist'), filename:'bundle.js' }, module:{ rules:[{ loader: 'babel-loader', test: /\.js(x)?$/, exclude: /node_modules/ }, { test: /\.s?css$/, use:CSSExtract.extract({ use:[ { loader:'css-loader', options:{ sourceMap:true } }, { loader:'sass-loader', options:{ sourceMap:true } } ] }) }] }, plugins:[ CSSExtract ], devtool: isProduction ? 'source-map':'inline-source-map', devServer:{ contentBase: path.join(__dirname, 'public'), historyApiFallback:true, publicPath:'/dist/' } }; }注意:target: 'electron-renderer',讓我們的App在調試式只能在Electron下作用。
React
本次編寫的是一個簡單的顯示時間的App,React 模組如下:import React from 'react'; class Time extends React.Component{ state = { time:'' } 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+'年'+Month+'月'+Day+'日'+Hour+':'+Minute+':'+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('electron'); const {app,BrowserWindow} = electron; let mainWindow = electron; app.on('ready',()=>{ 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
yarn run electron
建構App
我們在package.json檔案裡加入以下指令:"packager": "electron-packager . - -platform=darwin --electron-version=1.7.9 --overwrite"
改進
大家應該注意到按照之前的方法,我們在調試時每修改一次就要重用webpack打包,當然也可以使用webpack- dev-server來監測改變。只不過這樣我們需要對專案進行調整:##
mainWindow.loadURL(`http://localhost:8080/index.html`);
因為此時我們是檢測的webpack-dev-server下的文件,此時我們在專案中做的修改就能即時在electron中看到了。
若調試和測試完成,只需要修改loadURL為:
#
mainWindow.loadURL(`file://${__dirname}/public/index.html`);
注意,在建置最終應用程式前應該注意此時的web檔案是否在webpack-dev-server下運作,若是則應該使用webpack產生靜態打包檔。
相關推薦:
JavaScript開發跨平台的桌面應用具體介紹(圖文)基於XML的桌面應用的圖文碼詳細介紹用electron寫桌面應用程式_html/css_WEB-ITnose以上是Electron建構React、Webpack桌面應用教學的詳細內容。更多資訊請關注PHP中文網其他相關文章!