Краткое руководство по настройке пустого, но работающего приложения Электрон с помощью 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. Структура коммитов аналогична этой статье!
Надеюсь, это помогло вам так же, как если бы это помогло мне! Дайте мне знать, если у вас есть какие-либо упрощения или рекомендации по этому поводу!