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"
로그인 후 복사
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
먼저 webpack을 사용하여 파일을 패키징하고 dist/
yarn run 아래에 Bundle.js 및 style.css를 생성합니다. 전자
디버깅 시작:
Build App
package.json 파일에 다음 명령을 추가합니다:
"packager" : " electronic-packager . --platform=darwin --electron-version=1.7.9 --overwrite"
는 Mac 데스크톱 애플리케이션을 빌드하고 이 명령을 사용하기 전에 빌드한 파일을 덮어쓰는 것을 의미합니다.
잠시 기다리면 디렉토리에 데스크탑 애플리케이션인 내장 폴더가 표시됩니다.
이때 애플리케이션을 열면 디버깅 중 탐색 모음 메뉴가 사라지고 종료 옵션이 하나만 있는 것을 볼 수 있습니다. 이는 애플리케이션의 메뉴 모음 항목을 설정하지 않았기 때문이며 Electron입니다. 디버깅을 위한 다양한 메뉴를 빌드할 때 폐기합니다.
🎜Improvements🎜🎜🎜모두가 이전 방법에 따르면 디버깅 중에 웹팩 패키징을 수정할 때마다 재사용해야 한다는 점을 알아야 합니다. 물론 webpack-dev-server를 사용하여 변경 사항을 모니터링할 수도 있습니다. 프로젝트를 조정해야 합니다. 🎜🎜🎜index.js 파일의 loadURL을 다음과 같이 수정합니다. 🎜🎜🎜🎜🎜
mainWindow.loadURL(`file://${__dirname}/public/index.html`);로그인 후 복사
🎜 그런 다음 다음을 실행합니다. 🎜🎜🎜
yarn run electronic🎜🎜🎜 현재 webpack-dev-server 아래의 파일을 감지하고 있기 때문에 프로젝트에서 수정한 내용을 실시간으로 전자에서 볼 수 있습니다. 🎜🎜🎜디버깅 및 테스트가 완료되면 다음 빌드 작업을 진행하려면 loadURL을 🎜🎜🎜🎜🎜rrreee🎜으로 수정하기만 하면 됩니다. 🎜🎜최종 애플리케이션을 빌드하기 전에 현재 웹 파일이 webpack-dev-server에서 실행되고 있는지 주의해야 합니다. 그렇다면 webpack을 사용하여 정적 패키징 파일을 생성해야 합니다. 🎜🎜관련 권장 사항: 🎜🎜🎜크로스 플랫폼 데스크톱 애플리케이션(그래픽 및 텍스트)의 JavaScript 개발에 대한 자세한 소개 🎜🎜🎜🎜XML 기반 데스크톱 애플리케이션용 그래픽 및 텍스트 코드에 대한 자세한 소개🎜🎜🎜🎜electron을 사용하여 데스크톱 작성 apps_html/css_WEB- ITnose🎜🎜🎜
위 내용은 Electron을 사용하여 React 및 Webpack 데스크톱 애플리케이션을 구축하는 방법에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
