Сборка и распространение для настольных платформ
Создавайте установщики для macOS, Windows и Linux с помощью electron-builder, включая подпись кода и автоматическое обновление.
«Сборка и распространение для настольных платформ» — бесплатный урок React Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.
Конфигурация electron-builder
electron-builder — стандартный инструмент для упаковки приложений Electron в установщики, готовые к распространению. Его конфигурация находится в package.json под ключом "build" и задаёт метаданные приложения (appId, productName), пути к значкам и целевые форматы для каждой платформы.
Целевые форматы сборки для разных платформ
electron-builder поддерживает macOS (dmg и zip), Windows (установщик nsis) и Linux (AppImage и deb). Вы можете указать несколько платформ в одной команде сборки или настроить CI так, чтобы каждая платформа собиралась на своём нативном исполнителе для лучшей совместимости.
Подписание кода для macOS
Для macOS требуется подписать код сертификатом Apple Developer, чтобы Gatekeeper разрешил пользователям открывать приложение без предупреждения системы безопасности. Во время сборки electron-builder считывает сертификат из Связки ключей macOS и автоматически подписывает все двоичные файлы.
Нотариальная заверка для macOS
Помимо подписания кода, современные версии macOS также требуют нотариальной заверки — отправки приложения в сервис нотариальной заверки Apple, где оно проверяется на наличие вредоносного ПО и получает специальный маркер. electron-builder может автоматизировать нотариальную заверку через electron-notarize, а пользователи macOS 10.15 и более новых версий не смогут открыть приложение без неё.
Подписание кода для Windows
Для Windows требуется сертификат Authenticode от доверенного центра сертификации (CA), чтобы SmartScreen доверял вашему установщику. Без подписи пользователи увидят предупреждение "Windows защитила ваш компьютер". Сертификаты с расширенной проверкой (EV) сразу устраняют это предупреждение, а стандартные сертификаты OV постепенно формируют доверие.
Структура результатов сборки
После успешной сборки electron-builder записывает установщики для конкретных платформ в каталог dist/. Там находятся DMG или zip для macOS, файл NSIS .exe для Windows и AppImage или .deb для Linux, а также манифест автоматического обновления latest.yml (или latest-mac.yml).
Значки приложения
Приложения Electron нуждаются в значках в форматах, специфичных для платформы: PNG размером 512x512 для Linux, файле ICNS (с несколькими разрешениями) для macOS и файле ICO (с несколькими разрешениями) для Windows. electron-builder может создать все форматы из одного PNG размером 1024x1024 с помощью флага --icon.
Автоматическое обновление с electron-updater
Пакет electron-updater интегрируется с electron-builder и обеспечивает автоматические обновления. Публикуйте сборки в GitHub Releases или S3, и electron-updater сможет проверять обновления при запуске, загружать инкрементальное обновление в фоновом режиме и предлагать пользователю перезапустить приложение.
Проверка обновлений при запуске
Вызовите autoUpdater.checkForUpdatesAndNotify() в main.js после готовности приложения. electron-updater получает манифест latest.yml из настроенного места публикации, сравнивает версии и, если доступно обновление, загружает его и показывает системное уведомление, когда оно готово к установке.
Архив ASAR
electron-builder объединяет файлы JavaScript вашего приложения в один архив ASAR (похожий на архив tar) для распространения. Это повышает скорость запуска за счёт сокращения обращений к файловой системе и усложняет (но не делает невозможным) непосредственный просмотр исходного кода.
Распаковка нативных модулей из ASAR
Нативные модули Node.js (файлы .node) нельзя загружать из архива ASAR — их необходимо распаковать в файловую систему. Настройте asarUnpack в electron-builder, чтобы указать шаблоны нативных модулей; они будут помещены в каталог app.asar.unpacked рядом с архивом.
Требование нотариальной заверки для macOS
Почему для распространения приложений на macOS требуется нотариальная заверка, если код уже подписан?
Итоги урока
Распространение приложения Electron включает настройку целевых форматов electron-builder, подписание кода для macOS (с нотариальной заверкой) и Windows (с помощью Authenticode), а также, при необходимости, настройку автоматических обновлений через electron-updater. Архив ASAR объединяет приложение для распространения, а нативные модули распаковываются отдельно. Надёжный конвейер CI/CD автоматически выполняет эти шаги для каждой платформы.
Изучай React с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 88
- Уроки
- 324
Часто задаваемые вопросы
Урок «Сборка и распространение для настольных платформ» бесплатный?
Да — полный текст урока «Сборка и распространение для настольных платформ» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.
Чему я научусь в уроке «Сборка и распространение для настольных платформ»?
Создавайте установщики для macOS, Windows и Linux с помощью electron-builder, включая подпись кода и автоматическое обновление. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Сборка и распространение для настольных платформ»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Архитектура Electron: основной процесс и процесс визуализации
- Настройка React с Electron
- Связь между процессами через IPC
- Сборка и распространение для настольных платформ