Краткое руководство по настройке пустого, но работающего приложения Электрон с помощью Svelte.

Есть несколько шаблонов проектов именно для этой цели. У каждого из них были свои прелести, но также и некоторые странности (например, создание тонны предупреждений в консоли разработчика Electron). Так что я помассировала и объединила их, и получилось то, что я здесь описываю!

Настройка Node и Svelte

Создайте или перейдите в пустую папку проекта и выполните следующие команды в своем терминале:

npx degit sveltejs/template
npm install

Это должно создать package.json и конфигурацию свернутого с базовым Svelte.

Небольшая чистка, которую нужно сделать... Если вы посмотрите на package.json, вы увидите, что sirv-cli — это только производственная зависимость. Вам не понадобится это для Electron, поэтому переместите его в dev:

npm install sirv-cli --save-dev

Относительно всех ваших ссылок внутри public/index.html для использования через Electron. Один пример:

<script defer src='/bundle.js'></script>

становится

<script defer src='bundle.js'></script>

Svelte готов к работе! Проверьте это, выполнив

npm run dev

и откройте http://localhost:5000. Вы должны увидеть распечатанный текст Hello World!

Настройка Электрона

Установите Электрон как зависимость от разработчиков:

npm install --save-dev electron

Создайте главный сценарий электрона — я назову его electron.js — в разделе src/

Теперь отредактируйте файл package.json и

  • Добавьте следующую строку под существующей строкой version:
"main": "./src/electron.js",
  • Добавьте 2 команды в раздел scripts:
"electron": "run-s build pure-electron",
"pure-electron": "electron ."

Приложение Electron готово к работе! Протестируйте его, выполнив:

npm run electron

Живая перезагрузка для Electron

Теперь вы можете создавать и запускать приложение Electron. Чтобы иметь живую перезагрузку (обновление приложения при изменении файлов CSS/JavaScript), выполните следующие действия.

  • Установите библиотеку Chokidar, которая помогает при просмотре файлов:
npm install chokidar --save-dev
  • Отредактируйте src/electron.js и добавьте следующий код в функцию createWindow() в экземпляре переменной mainWindow:
let watcher;
if (process.env.NODE_ENV === 'development') {
    watcher = require('chokidar').watch(path.join(__dirname, '../public/bundle.js'), { ignoreInitial: true });
    watcher.on('change', () => {
        mainWindow.reload();
    });
}
  • Также закройте наблюдатель в существующем mainWindow.on(‘closed’…
if (watcher) {
    watcher.close();
}
  • Теперь добавьте эти команды в свой package.json:
"electron-dev": "run-p autobuild pure-electron-dev",
"pure-electron-dev": "NODE_ENV=development electron ."

Живая перезагрузка готова к работе! Проверьте это, выполнив

npm run electron-dev

и например добавление еще одного восклицательного знака к заголовку внутри src/App.svelte!

Сборка дистрибутива (OS X)

Чтобы создать дистрибутив, у вас есть несколько вариантов. Наиболее распространенными являются Electron Packager (упаковщик электронов по умолчанию) и Electron Builder. Оба имеют свои собственные способы настройки дистрибутива, поэтому не путайте их. Я покажу, как собрать минимальный пакет OS-X с помощью Electron Builder.

  • Установите пакет:
npm install electron-builder --save-dev
  • Создайте файл electron-builder.yml в корне вашего проекта:
appId: "my.app.id"
# Package app code into a asar archive. Set to false to debug issues.
asar: true
# Mac OS configuration
mac:
  icon: "public/icons/my_app.icns"
  category: "public.app-category.utilities"
  • Добавьте эту команду в package.json:
"dist-darwin": "run-s build pure-dist-darwin"
"pure-dist-darwin": "electron-builder --dir --mac --config electron-builder.yml"

Вот и все! Если вы работаете на Mac, теперь вы сможете выполнять

npm run dist-darwin
open dist/mac/svelte-app.app

В кратком руководстве вы узнаете, как настроить самые основные вещи, например:

  • Измените имя приложения, изменив имя в package.json.
  • Измените заголовок окна, изменив заголовок в public/index.html.

Настройка значков приложений (OS X)

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

  • Использовал Gravit Designer для создания изображения.
  • Экспортировал изображение в формате PNG.
  • Используется Генератор значков для создания значков из PNG.
  • Папка созданных значков переименована с `AppIcon.appiconset` на `AppIcon.iconset` (чтобы iconutil мог работать с ней).
  • Выполнить на терминале:
iconutil -c icns AppIcon.iconset
  • Набор AppIcon.iconset перемещен в то, что настроено в electron-builder.yml.

Если вы считаете, что сделали все правильно, но по-прежнему видите стандартную иконку Электрона… Попробуйте следующее:

touch dist/mac/template-electron-svelte.app
touch dist/mac/template-electron-svelte.app/Contents/Info.plist

Заключительные слова

Это только стартер. Чтобы узнать о функциональности Electron, обратитесь к его отличному руководству: https://electronjs.org/docs. Для сборки и публикации релизов смотрите https://www.electron.build/.

Полный код находится в разделе https://github.com/jzillmann/template-electron-svelte. Структура коммитов аналогична этой статье!

Надеюсь, это помогло вам так же, как если бы это помогло мне! Дайте мне знать, если у вас есть какие-либо упрощения или рекомендации по этому поводу!