Рубрики
Без рубрики

Построить приложение на рабочем столе с электроном и SVELTE

Привет всем, добро пожаловать в другую статью в серии, давайте что-то построить!, Серия, посвященная т … Помечено электрон, Svelte, JavaScript.

Привет всем, добро пожаловать в другую статью в серии Давайте построим что-то! , серия, посвященная строительству, ну, что-то Это включает в себя несколько технологий (техник и технологий) в основном в 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”