<强>前言
电子可以使用HTML, CSS, JavaScript构建跨平台桌面应用,可是在使用到反应和Webpack时,会遇到一些配置问题,本文将针对反应+ 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”,
“电子”:“^ 1.7.9”,
:“electron-packager ^ 10.1.0”,
:“extract-text-webpack-plugin ^ 3.0.2”,
:“node-sass ^ 4.7.2”,
“反应”:“^ 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打包,会生成一个很大的包文件,在桌面端比较影响性能,而调试的时候却需要较快地生成束,可是又需要使用sourcemap来定位错误,所以我们使用一个函数来切换各种环境:
模块。出口=(env)=祝辞{
* * * * * *
const isProduction=env===吧?
* * * * * *
devtool: isProduction & # 63;“源图”:“inline-source-map”,
而我们在package.json文件里,编写以下命令:
:“构建:dev webpack”,
:“构建:促使webpack - p - env生产”,
就可以较好的切换环境。
以下是全部webpack.config.js:
const webpack=要求(“webpack”);
const path=要求(“路径”);
const ExtractTextPlugin=要求(“extract-text-webpack-plugin”);
模块。出口=(env)=祝辞{
const isProduction=env===吧?
const CSSExtract=new ExtractTextPlugin (“styles的css);
console.log (“env=' + env);
返回{
条目:“。/src/app.js ',
目标:“electron-renderer”,
输出:{
路径:路径。加入(__dirname,“公共”,“距离”),
文件名:“bundle.js”
},
模块:{
规则:[{
装载机:“babel-loader”,
测试:/\ . js (x) & # 63;美元/,
排除:/node_modules/}, {
测试:/\ s # 63; css/美元,
用途:CSSExtract.extract ({
用途:[
｛
装载机:“css-loader”,
选择:{
sourceMap:真
}
},
｛
装载机:“sass-loader”,
选择:{
sourceMap:真
}
}
]
}）
})
},
插件:[
CSSExtract
]，
devtool: isProduction & # 63;“源图”:“inline-source-map”,
devServer: {
contentBase:路径。加入(__dirname,“公共”),
historyApiFallback:没错,
publicPath:“/dist/?
}
}；
}
之前
注意:目标:“electron-renderer”,让我们的应用在调试时只能在电子下作用。
<强>
本次编写的是一个简单的显示时间的应用,反应模块如下:
从“反应”进口的反应;
课堂时间延伸React.Component {
状态={
:“
}
取得时间(){
让日期=new日期();
让年=date.getFullYear ();
让月=date.getMonth ();
让天=date.getDate ();
让小时=date.getHours ();
让分钟=date.getMinutes ();
让秒=date.getSeconds ();
让时间=年+的年+月+‘月’+‘日’+小时+ +天‘:’+分钟+‘:’+秒;
返回时间;
}
componentDidMount () {
setInterval()=祝辞{
this.setState(()=祝辞{
返回{
时间:this.getTime ()
}
}）;
}, 1000);
}
呈现(){
让timetext=this.state.time;
回报(
& lt; div>
& lt; h2> {timetext} & lt;/h2>
& lt;/div>
）;
}
}
出口时间违约;
<强>电子
本次的应用不涉及复杂的电子API,仅仅作为展示的容器:
const电子=要求(“电子”);
const{应用,BrowserWindow}=电子;
让主窗口=电子;
app.on(“准备好”,()=祝辞{
主窗口=new BrowserWindow ({});
mainWindow.loadURL(“文件://$ {__dirname}/公共/index . html”);
});
index . html
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比;
& lt; title> React-Webpack-Electron
