Создание шаблона для React + Electron + Parcel с горячей перезагрузкой
Недавно я хотел создать настольное приложение, используя Электрон в качестве фреймворка и React в качестве библиотеки пользовательского интерфейса. Кроме того, я хотел настройку без настройки, поэтому я обратился к Посылке. Я просмотрел пару руководств, но либо они не упоминали горячую перезагрузку, либо решения, необходимые для запуска нескольких отдельных процессов. Чтобы все упростить, я создал шаблон, который могут использовать и другие, и поэтому этот урок был создан, чтобы объяснить, как он работает.
Настройка посылки
Сначала создайте новый проект npm, запустив npm init -y
, затем установите эти две зависимости, с которыми мы будем работать:
npm i electron parcel-bundler
Нам потребуется минимальная настройка, поэтому добавьте папку public
с файлом index.html
:
Следует отметить две важные вещи. Во-первых, у вас есть метатег Content-Security-Policy
. Это необходимо, если вы хотите избавиться от предупреждения безопасности, которое Electron выдает в консоли.
Во-вторых, я сослался на скрипт с именем index.js
в папке src
, поэтому убедитесь, что вы его создали. На данный момент будет достаточно пустого файла. Чтобы позволить Parcel создавать эти файлы, создайте папку scripts
и добавьте файл start.js
со следующим содержимым:
Это создаст новый упаковщик Parcel с несколькими параметрами конфигурации. Он устанавливает каталог сборки в build
. По умолчанию установлено значение dist
. Он заставляет ссылаться на ресурсы относительно вашего сгенерированного файла index
, поэтому установлено значение publicUrl
. Это также заставляет сборщика избегать создания исходных карт и автоматической установки отсутствующих зависимостей. Вы также хотите установить hmr
в false, иначе вы можете столкнуться с ошибками, говорящими:
Uncaught DOMException: Failed to construct 'WebSocket': The URL 'ws://:58083/' is invalid.
Если вы хотите дополнительно настроить параметры, вы можете обратиться к Документации по API на официальном сайте Parcel. Чтобы упростить запуск этого скрипта, добавьте команду start
в файл package.json
:
Если вы все сделали правильно, вы должны увидеть сгенерированную папку build
после запуска npm run start
.
Добавление электрона
Чтобы добавить Electron в проект, добавьте новый скрипт в свой package.json
, который мы можем использовать для запуска электрона:
При запуске Electron ищет файл main
, указанный в вашем package.json
. Чтобы сохранить корень проекта чистым, добавьте папку electron
в каталог src
и создайте index.js
, а затем убедитесь, что вы ссылаетесь на него в своем package.json
:
В вашем index.js
для Electron укажите два новых файла; один для производства и один для разработки.
Для базовой настройки вы можете добавить в свои файлы следующее содержимое. Включите nodeIntegration
, чтобы избежать ошибок Parcel:
Убедитесь, что вы загружаете сгенерированный файл index.html
из папки build
. Чтобы также запустить Electron с npm run start
, вам нужно немного изменить свой скрипт start.js
. Под options
добавьте следующее:
Это вызовет новый процесс, как только Parcel впервые объединит активы. Запустите npm run start
еще раз, и вы должны увидеть, как Parcel запускает Electron.
Добавление горячей перезагрузки
Если вы попытаетесь модифицировать ассет, в данный момент он ничего не сделает, поэтому давайте добавим горячую перезагрузку. Мы будем использовать модуль electron-reloader
от Sindre Sorhus. Запустите npm i electron-reloader
, чтобы установить его, затем все, что вам нужно сделать, это добавить следующее в начало вашего файла dev.js
, прежде чем вы создадите окно для Electron:
Попробуйте изменить любой из ваших активов, и Electron должен перезагрузиться автоматически.
Добавление React в проект
Чтобы добавить React в этот проект, просто установите необходимые зависимости:
npm i react react-dom
Загрузите ваше приложение в файл src/index.js
:
И все готово. Компонент App
экспортирует слегка измененную версию Create React App, которую вы можете проверить в GitHub Repository.
Создание проекта
Наконец, вы хотите создать проект для конечных пользователей. Для этого нам понадобится еще пара пакетов. А именно:
npm i electron-packager electron-winstaller
electron-packager
отвечает за создание исполняемого файла для проекта, но это не приведет к созданию единого установщика.electron-winstaller
можно использовать для создания установщика из пакета, который генерируетelectron-packager
.
Добавьте скрипт build
в папку package.json
, а также скрипт build.js
в папку scripts
:
Чтобы собрать исполняемый файл и программу установки, добавьте в свой скрипт build.js
следующее:
Список доступных опций для electron-packager
можно найти в их официальной документации. В пакете electron-winstaller
также есть таблица поддерживаемых настроек, которую вы можете проверить. Несколько вещей, о которых следует помнить, чтобы избежать ошибок во время создания установщика:
- Пакет установщика использует поле
name
из файлаpackage.json
. Убедитесь, что он не содержит тире или специальных символов. - Также убедитесь, что вы ссылаетесь на правильный каталог и файл в
createWindowsInstaller
, тот, который сгенерированpackager
.
Используя приведенный выше скрипт, он сначала сгенерирует исполняемый файл в папке dist
, а на основе сгенерированных файлов также создаст установщик.
Резюме
И теперь у вас есть основа для приложения Electron с React, созданного Parcel — сборщиком веб-приложений с нулевой конфигурацией. Хотя эта настройка в некоторой степени настраивается с помощью API-интерфейса упаковщика. Как упоминалось в начале, вы можете клонировать весь проект из следующего репозитория GitHub:
Есть ли у вас что-нибудь еще, чтобы добавить к этому уроку? Дайте нам знать в комментариях ниже! Спасибо за прочтение, удачного кодирования!