Electron을 사용하여 React 및 Webpack 데스크톱 애플리케이션을 구축하는 방법에 대한 튜토리얼
- 小云云원래의
- 2017-12-18 09:59:542803검색
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
yarn run 아래에 Bundle.js 및 style.css를 생성합니다. 전자 
Build App
package.json 파일에 다음 명령을 추가합니다:"packager" : " electronic-packager . --platform=darwin --electron-version=1.7.9 --overwrite"
잠시 기다리면 디렉토리에 데스크탑 애플리케이션인 내장 폴더가 표시됩니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!