Привет всем, добро пожаловать в другую статью в серии Давайте построим что-то! , серия, посвященная строительству, ну, что-то Это включает в себя несколько технологий (техник и технологий) в основном в JavaScript. В этой статье я хотел бы поделиться своим первым опытом, созданным настольным приложением с Электрон (С поддержкой от Electron Builder ) и SVELTE Отказ Если вы никогда не слышали ни о чем из них, просто нажмите на ссылки, чтобы узнать удивительность. Теперь давайте просто погрузимся.
Шаг установки довольно просты и просты, мы собираемся начать с шаблона SVELTE, так как он уже содержит много зависимостей, собранных в одной котельной, то мы интегрируем электрон в наше приложение для начала.
1.1. Инициировать проект SVELTE
Если вы видели мой предыдущий пост с расширением браузера, вы должны быть знакомы с этим шагом уже. Из CLI, беги NPX Degit Sveltejs/Template Electron-App-Svelte
Отказ Это сделает копию шаблона SVELTE на вашу машину с именем Electron-App-Svelte
и базовая структура, как видно в репозитории.
Беги NPM установить
Чтобы установить все необходимые зависимости в шаблоне package.json
Отказ
1.2. Интегрировать электрон
Теперь мы устанавливаем электронный пакет, запустив NPM установить электрон --save-dev
Отказ Однажды сделано, давайте создадим наше index.js
Файл в корне со следующим контентом:
const { app, BrowserWindow } = require("electron"); const path = require("path"); app.on("ready", () => { const mainWindow = new BrowserWindow(); mainWindow.loadFile(path.join(__dirname, "public/index.html")); mainWindow.webContents.openDevTools(); });
Это минимальный контент, необходимый для электрона для создания окна и попытка загрузить наш вход HTML-файл из публичный
папка.
Далее давайте внесем некоторые изменения в нашем package.json
Чтобы получить его на работу:
{ ... "main": "index.js" "scripts": { "build": "rollup -c", "dev": "rollup -c -w", "start": "electron .", } }
Итак, что я сделал, добавил новое поле Главная
и указывая на это index.js
Файл, который мы только что создали, а также модифицируя Начать
Скрипт, чтобы вызвать электрон для загрузки нашего скомпилированного кода в окне приложения. Теперь нам просто нужно бежать NPM запустить Dev
Для компиляции нашего исходного кода Svelte и впоследствии начальный скрипт будет выпущен автоматически (как предопределено на нашем конфиге ROLLUP). Давайте попробуем его посмотреть, это уже работает:
Нету, наше приложение кажется пустым с некоторыми ошибками в консоли Dev. По-видимому, соответствующие ресурсы не могут быть загружены из-за неправильного пути, это связано с тем, что мы не обслуживаем наши ресурсы через любой вид хоста. Обходной путь довольно прост, давайте откроем наш index.html
Файл и удалить все / В начале ссылок это должно исправить это. Попробуйте запускать его снова:
Удивительно, у нас сейчас есть наш электрон + Svelte приложение готово к разработке 🎉
После выполнения с настройкой вы можете продолжить разработку так же, как и с веб-приложениями. Единственное отличие состоит в том, что наше приложение в настоящее время запущено внутри окна вместо веб-браузера (хотя они все еще частично такие же, как окно, также использует двигатель V8 JavaScript под капотом для рендеринга веб-контента).
Просто запустить NPM запустить Dev
начать разработку. Любые изменения в нашем исходном коде отслеживаются и автоматически повторно скомпилированы, нам нужно только нажать Ctrl + R
освежить наше окно и отражать изменения.
После завершения разработки следующая вещь, которую мы должны заботиться о том, очевидно, как распространять наше настольное приложение, насколько это отличается от обычного распространения веб-приложения?
Наверняка это другое, но вообще не так сложно. Давайте посмотрим, как это работает:
Буквально, все, что нам нужно, это электрон-строитель
Пакет, так что давайте сначала установимся с NPM Установите электрон-Builder --save-dev
Отказ Далее, в нашем package.json
Добавьте новый скрипт, как показано ниже:
{ scripts: { ... "dist": "npm run build && electron-builder" } }
Вот и все. Наше Dist
Скрипт создаст созданную версию нашего исходного кода SVELTE и триггерь электрон-строитель
Команда для создания полного распространенного приложения для рабочего стола. Давайте попробуем сейчас и посмотрим, что это дает нам, бегите NPM запустить dist
:
Смотри, а Dist
Папка появляется в результате, и внутри этого есть много вещей, но нам нужно только относиться к тем 2 основным моментам:
-
.exe
Установщик (как Windows была моей целевой ОС), что нам нужно для распространения нашего приложения для пользователей. - При установке,
.exe
Пакет будет просто извлекать именно то, что внутриWin-распакованные
Затем можно использовать папку на машину пользователей и приложение. Следовательно, альтернативно, вы также можете сжать эту папку и распределить его пользователям, что все еще обеспечивает тот же результат.
Полный репозиторий вы можете найти по адресу: https://github.com/khang-nd/electron-app-svelte
И это все в этой статье обмена, спасибо за чтение и увидимся в следующем.
Оригинал: “https://dev.to/khangnd/build-a-desktop-app-with-electron-and-svelte-44dp”