Электрон + Реакт: проект с использованием фреймворка

Проект представляет собой пример создания, тестирования и упаковки настольных приложений с использованием Electron и React. Он также демонстрирует, как вызывать DLL в среде Electron и как использовать последнюю версию Node.js. В проекте используется интерфейс Ant-Design.

Основные особенности проекта:

• Пример создания, тестирования, упаковки настольных приложений на основе Electron и React;
• Пример вызова DLL в среде Electron;
• Использование последней версии Node.js;
• Интерфейс, созданный с помощью Ant-Design.

Быстрый старт

1. Установка инструментов:
   • Установите Git и Node.js.
   • Для установки Python рекомендуется использовать последнюю стабильную версию.
   • Установите Visual Studio Build Tools или Visual Studio Community. В данном примере используется VS Community 2022. Убедитесь, что версия node-gyp в вашей среде npm не ниже 8.4.x для совместимости с VS 2022.

node -v
v18.16.0
npm -v
v9.5.1
npx node-gyp -v
v9.3.1

2. Настройка npm-зеркала:

# Настройка npm-зеркала
npm config set registry https://registry.npmmirror.com/
# Установка переменной окружения ELECTRON_MIRROR=https://registry.npmmirror.com/

3. Запуск проекта:

Требуется разрешение администратора, возможно, потребуется отключить антивирусное ПО, такое как 360.

# Клонирование проекта на локальный компьютер
git clone https://github.com/fddi/electron-react-quick-start
# Переход в каталог проекта
cd electron-react-quick-start
# Указание версии VS
npm config set msvs_version 2022
# Установка
npm install
# Запуск
npm run start

• Интерфейс запуска:

• Пример вызова DLL:

4. Упаковка:

# Упаковка (64-битная Windows)
npm run build & npm run make

В этом проекте используется инструмент Electron-Forge для упаковки. Конфигурацию упаковки можно изменить в файле forge.config.js. См. документацию по конфигурации packagerConfig.

Проблемы и решения

1. Не удаётся найти VS-инструменты:

gyp ERR! stack Error: Could not find any Visual Studio installation to use

Ситуация 1: VS2022 требует node-gyp версии 8.4.0 или выше для поддержки. Из-за низкой версии npm, встроенной в npm, необходимо обновить Node.js или npm:

Указание версии VS
npm config set msvs_version 2022
npm -g install npm
# После установки последней версии npm проверьте версию
npm -v
8.5.0
npm install -g node-gyp
npx node-gyp -v
v8.4.1

Ситуация 2: удалите конфигурацию зеркала Taobao.

npm config list
npm config delete electron_mirror

Ситуация 3: используйте PowerShell.

2. Проблемы с установкой Electron:

Electron failed to install correctly, please delete node_modules/electron and try installing again

В папке node_modules/electron нет папки dist. Загрузите соответствующий пакет с зеркала Taobao и распакуйте его в папку node_modules/electron/dist. Создайте файл path.txt в папке node_modules/electron и введите следующий текст:

electron.exe

3. Проблема с тайм-аутом при упаковке:

Тайм-аут при загрузке nsis-3.0.4.2.7z

Проблема с сетью, загрузите соответствующий пакет с зеркала Taobao и распакуйте его в C:\Users\{User}\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.2.

Тайм-аут при загрузке winCodeSign

Проблема с сетью, загрузите пакет winCodeSign с зеркала Taobao, распакуйте в C:\Users\{User}\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-2.6.0.

Ресурсы

• Electronjs — Electron — это открытый исходный код от GitHub, используемый для создания кроссплатформенных настольных приложений с HTML, CSS и JavaScript.
• Reactjs — React — библиотека JavaScript для создания пользовательских интерфейсов.
• Ant.design — набор корпоративных UI-языков и реализация React.
• Koffi — быстрый и простой в использовании модуль Node.js C FFI.

Лицензия MIT License