Electron을 사용하여 React 및 Webpack 데스크톱 애플리케이션을 구축하는 방법에 대한 튜토리얼-JS 튜토리얼-php.cn

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

로그인 후 복사

그리고 package.json 파일에 다음 명령을 작성합니다.

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

로그인 후 복사

환경을 더 잘 전환할 수 있습니다.

다음은 모두 webpack.config.js입니다.

const webpack = require(&#39;webpack&#39;);
const path = require(&#39;path&#39;);
const ExtractTextPlugin = require(&#39;extract-text-webpack-plugin&#39;);
module.exports = (env)=>{
 const isProduction = env===&#39;production&#39;;
 const CSSExtract = new ExtractTextPlugin(&#39;styles.css&#39;);
 console.log(&#39;env=&#39;+env);
 return {
  entry:&#39;./src/app.js&#39;,
  target: &#39;electron-renderer&#39;,
  output:{
   path:path.join(__dirname, &#39;public&#39;,&#39;dist&#39;),
   filename:&#39;bundle.js&#39;
  },
  module:{
   rules:[{
    loader: &#39;babel-loader&#39;,
    test: /\.js(x)?$/,
    exclude: /node_modules/
   }, {
    test: /\.s?css$/,
    use:CSSExtract.extract({
     use:[
      {
       loader:&#39;css-loader&#39;,
       options:{
        sourceMap:true
       }
      },
      {
       loader:&#39;sass-loader&#39;,
       options:{
        sourceMap:true
       }
      }
     ]
    })
   }]
  },
  plugins:[
   CSSExtract
  ],
  devtool: isProduction ? &#39;source-map&#39;:&#39;inline-source-map&#39;,
  devServer:{
   contentBase: path.join(__dirname, &#39;public&#39;),
   historyApiFallback:true,
   publicPath:&#39;/dist/&#39;
  }
 };
}

로그인 후 복사

참고: 대상: 'electron-renderer'이므로 디버깅 중에 앱이 Electron에서만 작동할 수 있습니다.

React

이번에는 시간을 표시하는 간단한 앱을 작성했습니다. React 모듈은 다음과 같습니다.

import React from &#39;react&#39;;
class Time extends React.Component{
 state = {
  time:&#39;&#39;
 }
 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+&#39;年&#39;+Month+&#39;月&#39;+Day+&#39;日&#39;+Hour+&#39;:&#39;+Minute+&#39;:&#39;+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(&#39;electron&#39;);
const {app,BrowserWindow} = electron;
let mainWindow = electron;
app.on(&#39;ready&#39;,()=>{
 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!