Webpack이 Electron 앱을 구축하는 방법

이번에는 Webpack이 Electron 애플리케이션을 구축하는 방법을 보여드리겠습니다. Webpack이 Electron 애플리케이션을 구축할 때의 주의 사항은 무엇입니까?

Electron을 사용하면 웹 개발 기술을 사용하여 크로스 플랫폼 데스크톱 애플리케이션을 개발할 수 있습니다. 이는 Github에서 주도하고 오픈소스로 제공되며 친숙한 Atom과 VSCode editor가 Electron을 사용하여 개발되었습니다.

Electron은 Node.js와 Chromium 브라우저의 조합으로 Chromium 브라우저에 표시되는 웹 페이지를 애플리케이션으로 사용합니다. GUI는 Node.js를 통해 운영 체제와 상호 작용합니다. Electron에 있을 때 애플리케이션에서 창을 조작하면 실제로는 웹 페이지가 조작됩니다. 운영 체제를 통해 작업을 완료해야 하는 경우 웹 페이지는 Node.js를 통해 운영 체제와 상호 작용합니다.

이러한 방식으로 데스크톱 애플리케이션을 개발하면 다음과 같은 이점이 있습니다.

1. 개발 임계값을 낮추려면 웹 개발 기술과 Node.js만 마스터하면 됩니다. 수많은 웹 개발 기술과 기성 라이브러리를 Electron에서 재사용할 수 있습니다.

2. Chromium 브라우저와 Node.js가 모두 가능하기 때문입니다. 크로스 플랫폼, Electron은 다양한 운영 체제에서 실행되는 코드를 작성할 수 있습니다.

Electron 애플리케이션을 실행할 때 메인 프로세스를 시작하여 시작됩니다. 기본 프로세스의 시작은 Node.js를 통해 구현되어 항목 JavaScript 파일을 실행합니다. 이 항목 파일 main.js의 내용은 다음과 같습니다.

const { app, BrowserWindow } = require('electron')
// 保持一个对于 window 对象的全局引用，如果你不这样做，
// 当 JavaScript 对象被垃圾回收， window 会被自动地关闭
let win
// 打开主窗口
function createWindow() {
 // 创建浏览器窗口
 win = new BrowserWindow({ width: 800, height: 600 })
 // 加载应用的 index.html
 const indexPageURL = `file://${dirname}/dist/index.html`;
 win.loadURL(indexPageURL);
 // 当 window 被关闭，这个事件会被触发
 win.on('closed', () => {
  // 取消引用 window 对象
  win = null
 })
}
// Electron 会在创建浏览器窗口时调用这个函数。
app.on('ready', createWindow)
// 当全部窗口关闭时退出
app.on('window-all-closed', () => {
 // 在 macOS 上，除非用户用 Cmd + Q 确定地退出
 // 否则绝大部分应用会保持激活
 if (process.platform !== 'darwin') {
  app.quit()
 }
})

메인 프로세스가 시작된 후에는 항상 백그라운드에서 실행됩니다. 표시되고 작동되는 창은 메인 프로세스가 아니라 메인 프로세스에 의해 새로 시작된 창 하위 프로세스입니다.

애플리케이션에는 시작부터 종료까지 일련의 라이프 사이클 이벤트가 있습니다. Electron.app.on() 함수는 라이프 사이클 이벤트를 모니터링하고 특정 순간에 반응하는 데 사용됩니다. 예를 들어, app.on('ready') 이벤트에서 애플리케이션의 기본 창을 표시하려면 BrowserWindow를 사용하십시오.

시작되는 창은 실제로는 웹페이지입니다. 시작되면 loadURL에 전달된 웹페이지 주소가 로드됩니다. 각 창은 별도의 웹 페이지 프로세스이며 창 간의 통신에는 메시지를 전달하기 위해 기본 프로세스를 사용해야 합니다.

일반적으로 Electron 애플리케이션 개발은 웹 애플리케이션 개발과 매우 유사합니다. 차이점은 Electron의 실행 환경에는 브라우저와 Node.js API가 내장되어 있다는 것입니다. 웹 페이지를 개발할 때 브라우저에서 제공하는 API를 사용할 수도 있습니다. 또한 js에서 제공하는 Node.API를 사용합니다.

Webpack에 연결

다음으로 간단한 Electron 애플리케이션을 만듭니다. 애플리케이션이 시작된 후 메인 창을 표시해야 합니다. 이 버튼을 클릭하면 새 창이 표시되고 React를 사용하여 개발하게 됩니다. 웹 페이지.

Electron 애플리케이션의 각 창은 웹 페이지에 해당하므로 두 개의 웹 페이지, 즉 기본 창의 index.html과 새로 열린 창을 개발해야 합니다. 로그인.html. 즉, 프로젝트는 2개의 단일 페이지 애플리케이션으로 구성됩니다. 이는 3-10 다중 단일 페이지 애플리케이션 관리의 프로젝트와 매우 유사합니다. 전자 응용.

변경이 필요한 영역은 다음과 같습니다.

프로젝트 루트 디렉터리에 기본 프로세스에 대한 새 항목 파일 main.js를 만듭니다. 내용은 위와 일치합니다. 메인 윈도우 웹 페이지의 코드는 다음과 같습니다:

import React, { Component } from 'react';
import { render } from 'react-dom';
import { remote } from 'electron';
import path from 'path';
import './index.css';
class App extends Component {
 // 在按钮被点击时
 handleBtnClick() {
  // 新窗口对应的页面的 URI 地址
  const modalPath = path.join('file://', remote.app.getAppPath(), 'dist/login.html');
  // 新窗口的大小
  let win = new remote.BrowserWindow({ width: 400, height: 320 })
  win.on('close', function () {
   // 窗口被关闭时清空资源
   win = null
  })
  // 加载网页
  win.loadURL(modalPath)
  // 显示窗口
  win.show()
 }
 render() {
  return (
   <p>
    <h1>Page Index</h1>
    <button onClick={this.handleBtnClick}>Open Page Login</button>
   </p>
  )
 }
}
render(<App/>, window.document.getElementById('app'));

가장 중요한 부분은 전자 라이브러리에서 제공하는 API를 사용하여 버튼 클릭 이벤트에서 새 창을 열고 웹 페이지 파일의 주소를 로드하는 것입니다.

페이지 부분의 코드가 수정되었습니다. 다음으로 구성 코드가 수정됩니다. 여기에서 빌드하려면 다음을 수행해야 합니다.

두 창의 인터페이스에 해당하는 브라우저에서 실행할 수 있는 두 개의 웹 페이지를 구성하세요. 웹페이지의 JavaScript 코드는 Node.js 네이티브 모듈이나 전자 모듈을 호출할 수 있기 때문에 출력 코드는 이러한 모듈에 따라 달라집니다. 그러나 이러한 모듈에는 기본 지원이 있으므로 빌드된 코드는 이러한 모듈을 패키징할 수 없습니다.

Webpack에는 Electron 지원 기능이 내장되어 있으므로 위 요구 사항을 충족하는 것은 매우 간단합니다. Webpack

구성 파일
1. 에 다음과 같이 코드 한 줄을 추가하면 됩니다.

target: 'electron-renderer',

这句配置曾在2-7其它配置项-Target中提到，意思是指让 Webpack 构建出用于 Electron 渲染进程用的 JavaScript 代码，也就是这2个窗口需要的网页代码。

以上修改都完成后重新执行 Webpack 构建，对应的网页需要的代码都输出到了项目根目录下的 dist 目录里。

为了以 Electron 应用的形式运行，还需要安装新依赖：

# 安装 Electron 执行环境到项目中
npm i -D electron

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Angular实现可添加删除与计算总金额效果插件

Bootstrap模态框多次弹出提交BUG

위 내용은 Webpack이 Electron 앱을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!