Советы для вашего первого электронного приложения
Начинать работу с Electron весело. Я был взволнован, когда запустил свой первый BrowserWindow и почувствовал мощь Electron на кончиках своих пальцев. Мне не потребовалось много времени, чтобы полностью погрузиться в обширную документацию и другие вспомогательные пакеты и их обширную документацию. Я изо всех сил пытался понять такие термины, как nsis, squirrel, code signing и auto updating. После пары недель разочарований, удаления нескольких проектов и обучения на собственном горьком опыте я, наконец, чувствую, что нахожусь на твердой земле. Я постараюсь поделиться тем, что, по моему мнению, поможет тем, кто только начинает проникать в Electron.
Отказ от ответственности: Мои сборки Electron предназначены только для Windows. Вы не получите никакой конкретной Linux или macOS информации. В этой статье предполагается, что читатель имеет базовые знания JavaScript.
Совет 1.Используйте Electron Docs
На домашней странице Electron есть тонна документации. На самом деле так много, что это может быть немного ошеломляющим. Для абсолютных новичков начните ЗДЕСЬ. Я бы также рекомендовал познакомиться с API, в частности с приложением и BrowserWindow. Существует также раздел CLI и шаблонов, поддерживаемых сообществом. Я бы не рекомендовал использовать их на первых порах. Я потратил много времени на возню с разными системами, когда должен был сосредоточиться на базовом Electron.
Совет 2.Структура приложения и взаимодействие с разработчиком
Мои первые трудности возникли, когда я захотел использовать React для своего пользовательского интерфейса. Я думаю, что create-react-app легко интегрируется в Electron, но по какой-то причине я потратил много времени на настройку Webpack, который является полезным навыком, но со временем становится утомительным. В конце концов, я обнаружил electron-webpack. Это требует своего собственного обучения, но оно того стоит, потому что оно поставляется с заменой горячего модуля, создает пакеты для процессов main и renderer и очень расширяемо.
Basic Application Structure - src - common - main - renderer - static - package.json
Чтобы использовать React с electron-webpack, вам нужно установить некоторые вещи.
npm i -D @babel/preset-react
Чтобы использовать стрелочные функции в классах и использовать Sass для стилизации
npm i -D @babel/plugin-proposal-class-properties sass-loader node-sass
Эти пакеты будут автоматически распознаваться electron-webpack. Кроме того, файлы конфигурации могут быть созданы для более продвинутых вариантов использования. Документация по электронному веб-пакету.
Добавьте следующие скрипты в package.json
"dev": "electron-webpack dev" "compile": "electron-webpack"
В процессе разработки electron-webapck использует горячую замену модуля и обслуживает rendererпроцесс поверх localhost. Он также устанавливает process.env.NODE_ENV в режим разработки при запуске с dev. Теперь при внесении изменений в процесс main или renderer приложение будет автоматически перезагружаться. Все это делается с одного терминала и значительно увеличит опыт разработчиков.
const inDev = process.env.NODE_ENV === 'development'
const INDEX_HTML = `http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`
Еще одна полезная информация, которую следует знать, это то, что элемент div с id='app' автоматически добавляется в файл index.html, созданный electron-webpack. Используйте это как корень для React.
Знать, находитесь ли вы в разработке, очень полезно по ряду причин. Открытие инструментов разработки и установка расширений React или Redux не должны выполняться в рабочей среде.
npm i -D electron-devtools-installer
Для условной установки расширений создайте функцию.
// main/main.js
var mainWin = new BrowserWindow({...})
inDev && setupDevtools()
function setupDevtools() {
const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer')
mainWin.webContents.openDevTools({ mode: 'detach' })
installExtension(REACT_DEVELOPER_TOOLS)
.then(name => console.log(`Installed --> ${name}`))
.catch(console.log)
А как насчет папок common и static? Папка static зарезервирована для файлов, которые мы не хотим связывать с electron-webpack. Сюда входят такие вещи, как изображения или ico файлы. Я использую его для файлов json, которые я читаю и записываю с помощью модуля fs. Как в разработке, так и в производстве содержимое доступно по одному и тому же пути. Используйте специальную переменную __static. Я считаю, что это отличная встроенная функция.
const CONFIG_PATH = path.resolve(__static, 'config.json')
fs.readFile(CONFIG_PATH, (error, data) => {
if(error) throw error
const configuration = JSON.parse(data)
})
Используйте common для кода, необходимого как в процессах main, так и в процессах renderer. Хорошим примером может быть установка размеров BrowserWindow на основе размера экрана. В Electron есть встроенный модуль screen, помогающий в этом. Для упрощения electron-webpack позволяет импортировать файлы из common с псевдонимом. Мне нравится деструктурировать массивы, но использование деструктуризации объектов, вероятно, было бы более нормальным.
// creates coordinates to make a BrowserWindow half the width of
// of the screen, the full height of the screen and positioned on
// the right hand side of the screen
import windowDimensions from 'common/dimensions`
const [mainWidth, mainHeight, mainX, mainY] = windowDimensions()
// common/dimensions
import {screen} from 'electron'
export default function windowDimensions() {
const { width, height } = screen.getPrimaryDisplay().size
const w = width * .5
const h = height
const x = width - w
const y = 0
}
При запуске npm run compile electron-webpack по умолчанию создаст каталог dist и выведет скомпилированный код из src здесь.
Совет №3. Модуль desktopCapturer
Знакомство с desktopCapturer — хорошая идея, и оно может стать основой для множества типов приложений. Этот модуль Electron может захватывать видео и аудио источники любого экрана или окна, работающего на хост-компьютере. Использование этого с navigator.mediaDevices.getUserMedia() вернет поток. В Electron Docs есть отличный пример.
Я решил воспользоваться desktopCapturer в своем первом приложении. Я разработал Color Tool на основе цветовой схемы HSL. Я хотел посмотреть, смогу ли я воспроизвести все функции моих любимых приложений для выбора цвета. Я всегда думал, что утилита для пипетки — это очень круто. Это когда вы можете нажать на часть экрана, и значение цвета пикселя, на который нажали, отображается и/или копируется в буфер обмена.
Объединив desktopCapturer со способностью Electron создавать прозрачное окно, я смог добавить свою собственную функцию пипетки.
Что мне нравится в Electron, так это то, что у него есть возможность выбрать цвет из любого места. Цветовая утилита, которую я использовал, была расширением Chrome, и я мог использовать пипетку только в самом Chrome.
Основы пипетки — захват снимка из упомянутого выше потока, а затем рисование снимка в элемент canvas. Как только это будет сделано, координаты событий мыши можно использовать вместе с ImageData из canvas, чтобы найти значение цвета отдельного пикселя. Код слишком сложен, чтобы рассматривать его здесь целиком, но я поделюсь одним приемом, который мне нравится использовать.
Когда у меня есть видеопоток и я хочу получить снимок, мне нравится использовать HTML-элемент video, чтобы помочь мне. Я хочу убедиться, что пользователь никогда не увидит это, чтобы это было принято во внимание. Событие onloadedmetadata запускается вскоре после того, как элемент видео получает источник и начинает его загружать.
Скачать Color Tool для Windows
Совет № 4: Процесс сборки
Прелесть приложений Electron в том, что, несмотря на то, что они написаны на JavaScript, при их сборке на выходе получается исполняемый файл. При нацеливании на платформу Windows на выходе получается файл exe. Есть много вариантов, но я выбрал electron-builder, потому что он решает множество проблем с настраиваемой конфигурацией. Еще один плюс в том, что и electron-builder, и electron-webpack поддерживаются одними и теми же людьми и хорошо работают вместе.
npm i -D electron-builder
Это моя очень простая конфигурация сборки, добавленная к моему package.json
Добавьте следующие скрипты в package.json. Флаг p предназначен для публикации, а onTagOrDraft сообщает процессу сборки, что исполняемые файлы должны распространяться при наличии черновика или тега. С Github Releases черновик — это, по сути, неопубликованный релиз, над которым все еще ведется работа. Рекомендуемый рабочий процесс — создать этот черновик на Github и убедиться, что версия там соответствует полю версии в вашем package.json . Продолжайте отправлять черновики, пока не решите, что изменения требуют обновления версии. В этот момент опубликуйте черновик и создайте новый черновик для следующей версии как на Github, так и в вашем package.json.
"release": "electron-builder -p onTagOrDraft"
# Совет 5: автоматизируйте процессы сборки
быть в курсе
