Создание шаблона для 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:

Есть ли у вас что-нибудь еще, чтобы добавить к этому уроку? Дайте нам знать в комментариях ниже! Спасибо за прочтение, удачного кодирования!