Начните работу с Electron сегодня

Если вы работаете с JavaScript, вы думаете, что это язык Интернета, и если вы хотите создать настольное приложение, вам нужно изучить C # или что-то в этом роде. Но не отчаивайтесь! Вы можете использовать библиотеку Electron.js для создания настольных решений.

Посмотрим, как мы сможем это сделать!

Настраивать

По сути, Electron - это приложение Node.js. Как и любое приложение Node, у него будет package.json файл с инструкциями и списком зависимостей.

Давайте создадим новый проект Node:

yarn init
// or
npm init
// I prefer yarn

Он создаст package.json с начальной информацией о новом приложении. И нам нужно добавить начало в список скриптов в нашем package.json, чтобы мы могли запустить библиотеку Electron. Так выглядит начальный package.json:

Далее нам нужно установить библиотеку Electron:

yarn add electron

заявка

Теперь, когда среда готова, мы можем приступить к работе над приложением. Первым шагом будет создание файла index.js (или любое имя, которое вы укажете в package.json) и импорт библиотеки Electron и ее методов:

const { app, BrowserWindow } = require(‘electron’)

Затем давайте объявим параметры окна приложения и какой HTML-файл загружать с помощью простой функции JavaScript:

Да, мы используем HTML и Chrome для создания настольных приложений. Жизнь может быть странной, не волнуйтесь.

Затем мы инициализируем наше приложение и вызываем функцию createWindow:

app.whenReady().then(createWindow)

И, наконец, нам нужно создать index.html с некоторым содержимым по вашему выбору для рендеринга.

Похоже, мы готовы запустить наше первое приложение Electron. Давайте сделаем это, выполнив команду по вашему выбору:

yarn start
// or
npm start

И это работает!

В коде dex.js

Заключение

Несмотря на то, что мы использовали технологии веб-разработки, мы смогли создать настольное приложение. Посмотрите следующие статьи, где я добавляю перья и расширяю приложение дальше, чем базовый Hello World.

Продолжайте учиться, продолжайте расти!