Упаковка электронного приложения просто означает создание настольного установщика (dmg, exe, deb и т. Д.). Теперь, если вы решите вручную упаковать свое приложение, у вас будут плохие времена.

К счастью, есть модули, особенно два упомянутых ниже, которые облегчают задачу.

Электрон-строитель

Электрон-упаковщик

Мы будем использовать electronic-builder, так как он имеет встроенную поддержку Code Signing / Auto Update и т. Д.

Сконфигурируйте свое приложение для использования электронного конструктора:

  • Создайте каталог build в корне проекта и сохраните в нем background.png (фон macOS DMG), icon.icns (значок приложения macOS) и icon.ico (значок приложения Windows). Набор значков Linux будет сгенерирован автоматически на основе macOS. Бывший. Зулип-электрон / билд
  • Добавьте электронный конструктор в ваше приложение devDependencies, запустив:
npm install electron-builder --save-dev
  • В электронном построителе вы можете использовать две структуры package.json, а также один package.json. Мы будем использовать единую структуру package.json, так как ее проще поддерживать.

Пример один package.json

При сборке Windows вы также можете использовать цель NSIS, которая является целью по умолчанию и рекомендована электронным сборщиком.

"win": {
   "target": "NSIS"
}

Вот и все. Вы успешно настроили конструктор электронов. Теперь приступим к сборке установщиков. Чтобы упаковать приложение в установщик, используйте команду:

npm run dist

Программа установки будет создана в папке. / dist. По умолчанию команда сборки сгенерирует установщик только для текущей платформы и текущей архитектуры. Для бывшего. запуск его на OSX создаст -

$ npm run dist
    |-- mac
    |   |-- appname-version-mac.zip
    |   |-- appname-version.dmg
    |   |-- appname.app

В Windows -

# When using target — Squirrel
$ npm run dist
    |-- win
    |   |-- REALESES
    |   |-- appnameSetupversion.exe
    |   |-- appname-version-full.nupkg
    |-- win-unpacked
# When using target — NSIS
$ npm run dist
    |-- win
    |   |-- appnameSetupversion.exe
    |-- win-unpacked

В Linux -

$ npm run dist
    |-- appname-version.AppImage
    |-- appname-version.deb
    |-- linux-unpacked

electronic-builder легко настраивается. Для полного использования ознакомьтесь с его wiki. Zulip-electronics (два package.json) и onshape-desktop-shell (один package.json) - это некоторые реальные проекты, в которых для упаковки используется электронная сборка.

Если вам понравилась эта статья и вы хотите купить мне кофе ☕️ подпишитесь 👇