国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

使用Electron構建React+Webpack桌面應用的方法

來源:懂視網 責編:小采 時間:2020-11-27 22:23:34
文檔

使用Electron構建React+Webpack桌面應用的方法

使用Electron構建React+Webpack桌面應用的方法:前言 Electron可以使用HTML、CSS、JavaScript構建跨平臺桌面應用,可是在使用到React和Webpack時,會遇到一些配置問題,本文將針對React+Webpack下的Electron配置提供一個通用的解決方案。 環境配置 babel-core: ^6.26.0,
推薦度:
導讀使用Electron構建React+Webpack桌面應用的方法:前言 Electron可以使用HTML、CSS、JavaScript構建跨平臺桌面應用,可是在使用到React和Webpack時,會遇到一些配置問題,本文將針對React+Webpack下的Electron配置提供一個通用的解決方案。 環境配置 babel-core: ^6.26.0,

前言

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==='production';
 ******
 devtool: isProduction ? 'source-map':'inline-source-map',

而我們在package.json文件里,編寫以下命令:

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

就可以較好的切換環境。

以下是全部webpack.config.js:

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 (
 <div>
 <h1>{timetext}</h1>
 </div>
 );
 }
}
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>
 <div id="app"></div>
 <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生成靜態打包文件。

本文項目文件地址:https://github.com/Voyager-One/react-webpack-electron

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

使用Electron構建React+Webpack桌面應用的方法

使用Electron構建React+Webpack桌面應用的方法:前言 Electron可以使用HTML、CSS、JavaScript構建跨平臺桌面應用,可是在使用到React和Webpack時,會遇到一些配置問題,本文將針對React+Webpack下的Electron配置提供一個通用的解決方案。 環境配置 babel-core: ^6.26.0,
推薦度:
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 91亚洲国产成人久久精品网站 | 夜夜骑日日操 | 黄色毛片免费看 | 精品国产乱码久久久久久一区二区 | 久久一道本| 成人精品一区二区三区 | 欧美激情影院 | 国产伦精品一区二区三区网站 | 精品国产91久久久久 | 国产精品久久一区一区 | 欧美日韩不卡在线 | xx日韩| 在线综合亚洲欧美自拍 | 久久国产精品久久久久久久久久 | 一区二区视频 | 在线观看免费精品国自产 | 综合欧美亚洲 | 国产欧美日本在线 | 成人在线一区二区三区 | 亚洲第七页| 亚洲 欧美 日韩在线一区 | 国产欧美综合在线观看第七页 | 在线国产视频 | 成人区精品一区二区毛片不卡 | 亚洲色图欧美自拍 | 亚洲国产精品二区久久 | 国产精品亚洲精品日韩动图 | 欧美精品亚洲人成在线观看 | 久久国产精品成人免费 | 一级毛片不收费 | 亚洲另类色图 | 免费看特级淫片日本 | 国产成人无精品久久久 | 欧美日韩一二三区 | 国产69精品久久久久999 | 欧美日本在线 | 日韩电影在线 | 精品1区2区3区 | 国产日韩亚洲欧美 | 日本精品久久久一区二区三区 | 国产在线视频不卡 |