Webpack в действии — создание приложений Electron

Electron Webpack

Познакомьтесь с Электроном

ElectronОн позволяет разрабатывать кроссплатформенные настольные приложения с использованием технологий веб-разработки. Он управляется Github с открытым исходным кодом. Знакомые редакторы Atom и VSCode разработаны с использованием Electron.

Electron представляет собой комбинацию браузеров Node.js и Chromium, использующих браузер Chromium, который отображает веб-страницу как приложение с графическим интерфейсом, проходит через Node.js и взаимодействие с операционной системой. Когда вы находитесь в окне работы приложения Electron, фактически работает веб-страница. Когда ваша операция должна быть выполнена через операционную систему, страница перейдет и взаимодействие с операционной системой через Node.js.

Преимущества разработки настольных приложений таким образом:

  • Для снижения порога освоения нужно только освоить технологию веб-разработки и Node.js, большое количество технологий веб-разработки и готовых библиотек можно переиспользовать в Electron;
  • Поскольку браузер Chromium и Node.js являются кроссплатформой, электрон, способный сделать код записи для запуска в разных операционных системах.

При запуске приложения Electron оно начинается с основного процесса. Основной процесс запускается выполнением входного файла JavaScript через Node.js.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Чтобы отобразить главное окно приложения, см.Документация API для BrowserWindow.

Окно запуска на самом деле представляет собой веб-страницу, которая будет загружаться при запуске при его запуске.loadURLURL переданной веб-страницы. Каждое окно представляет собой отдельный процесс веб-страницы, и для связи между окнами необходимо передавать сообщения через основной процесс.

Electron 应用架构图

В целом разработка приложений Electron очень похожа на разработку веб-приложений. Разница в том, что среда выполнения Electron имеет как встроенный браузер, так и API Node.js. При разработке веб-страниц, помимо API, предоставляемого браузером, вы можете также используйте Node.API, предоставляемый js.

Доступ к веб-пакету

Далее делаем простое приложение Electron, для которого требуется, чтобы после запуска приложения отображалось главное окно.В главном окне есть кнопка.По нажатию этой кнопки открывается новое окно и веб-страница разрабатывается с помощью React .

Поскольку каждое окно в приложении Electron соответствует веб-странице, необходимо разработать две веб-страницы, одну для главного окна.index.htmlи только что открытое окноlogin.html. То есть проект состоит из 2-х одностраничных приложений, которые и3-10 Управление несколькими одностраничными приложениямиПроект очень похож, давайте превратим его в приложение Electron.

Места, которые необходимо изменить, следующие:

  • Создайте новый файл входа для основного процесса в корневом каталоге проекта.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 (
      <div>
        <h1>Page Index</h1>
        <button onClick={this.handleBtnClick}>Open Page Login</button>
      </div>
    )
  }
}

render(<App/>, window.document.getElementById('app'));

Наиболее важной частью этого является передача события нажатия кнопки.electronAPI, предоставляемый библиотекой, открывает новое окно и загружает адрес файла веб-страницы.

Модифицируется код страничной части, затем модифицируется код конструкции. Для этой сборки требуется следующее:

  • Построить 2 веб-страницы, которые можно запускать в браузере, соответствующие интерфейсу 2-х окон;
  • Поскольку могут быть вызовы собственных модулей Node.js илиelectronМодули, то есть от этих модулей зависит выходной код. Но поскольку эти модули имеют встроенную поддержку, встроенный код не может упаковать эти модули.

Выполнить вышеуказанные требования очень просто, потому что Webpack имеет встроенную поддержку Electron. Просто добавьте строку кода в файл конфигурации Webpack следующим образом:

target: 'electron-renderer',

Раньше эта конфигурация была2-7 Другие элементы конфигурации - цельКак упоминалось в , это означает позволить Webpack создать код JavaScript для процесса рендеринга Electron, который является кодом веб-страницы, необходимой для этих двух окон.

После завершения вышеуказанных изменений повторно запустите сборку Webpack, и код, необходимый для соответствующей веб-страницы, будет выведен в корневой каталог проекта.distв каталоге.

Чтобы работать как приложение Electron, необходимо установить новые зависимости:

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

После успешной установки запустите ее в каталоге проекта.electron .Вы можете успешно увидеть запущенное настольное приложение, эффект следующий:

Electron 应用运行效果图

этот примерПредоставьте полный код проекта

Ссылка для онлайн-чтения "Углубленный Webpack"

читать оригинал

Категории