Electron을 사용하여 React+Webpack 데스크톱 애플리케이션 구축(자세한 튜토리얼)
- 亚连원래의
- 2018-06-20 15:27:422307검색
이 글은 주로 Electron을 사용하여 React+Webpack 데스크톱 애플리케이션을 구축하는 방법을 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 편집기를 따라가며 함께 살펴보세요
머리말
Electron은 HTML, CSS 및 JavaScript를 사용하여 크로스 플랫폼 데스크톱 애플리케이션을 구축할 수 있습니다. 그러나 React 및 Webpack을 사용할 때 이 기사에서는 몇 가지 구성 문제에 직면하게 됩니다. Webpack에서 React+ 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"
configure webpack.config.js
기본 Webpack 패키징을 사용하기 때문에 대용량 번들 파일이 생성되어 데스크톱 성능에 영향을 주지만 디버깅하는 동안 더 빨라져야 합니다. 번들을 로컬로 배치하지만 버그를 찾으려면 소스맵을 사용해야 하므로 다양한 환경을 전환하는 함수를 사용합니다.
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/'
}
};
}참고: 대상: 'electron-renderer'이므로 앱은 디버깅 중에 Electron에서만 작동할 수 있습니다.
React
이번에는 시간을 표시하는 간단한 앱을 작성했습니다. 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
이 앱은 복잡한 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로 로드합니다.
Debugging
yarn run build:prodyarn 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
yarn run electronic<p></p>디버깅 시작: <p></p>
<p style="text-align: center"><img src="https://img.php.cn/upload/article/000/000/008/313e306ae672c469b2f4217247c0baf6-0%20.png%20" style="max-width:90%" style="max-width:90%" alt=""></p>
<p></p>Build App<p></p>
<p>package.json 파일에 다음 명령을 추가합니다: </p>
<p><code>"packager": "electron -packager . --platform=darwin --electron-version=1.7.9 --overwrite"
는 Mac 데스크톱 애플리케이션을 빌드하고 이전에 이 명령을 사용하여 빌드한 파일을 덮어쓰는 것을 의미합니다. 잠시 기다리면 디렉토리에 데스크탑 애플리케이션이 포함된 내장 폴더가 표시됩니다.
mainWindow.loadURL(`file://${__dirname}/public/index.html`);🎜 그런 다음 다음을 실행합니다. 🎜🎜yarn run electronic🎜🎜이 시점에서 우리는 dev-server 아래의 webpack -files 이때 프로젝트에서 수정한 내용을 전자에서 실시간으로 확인할 수 있습니다. 🎜🎜디버깅 및 테스트가 완료되면 다음 빌드 작업을 진행하려면 loadURL을 🎜rrreee🎜로 수정하기만 하면 됩니다. 🎜🎜! 최종 애플리케이션을 빌드하기 전에 현재 웹 파일이 webpack-dev-server에서 실행되고 있는지 주의해야 합니다. 그렇다면 webpack을 사용하여 정적 패키징 파일을 생성해야 합니다. 🎜🎜이 글의 프로젝트 파일 주소: https://github.com/Voyager-One/react-webpack-electron🎜🎜위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다. 🎜🎜관련 기사: 🎜🎜🎜React의 제어되는 구성 요소와 제어되지 않는 구성 요소에 대한 자세한 소개🎜🎜🎜🎜Angular를 사용하여 기본 장바구니 기능을 구현하는 방법🎜🎜🎜🎜node.js의 라우팅 및 미들웨어에 대한 자세한 소개 설명 🎜🎜위 내용은 Electron을 사용하여 React+Webpack 데스크톱 애플리케이션 구축(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!