Electron node js как создать исполняемый файл
Обновлено: 06.07.2024
Это руководство проведёт вас через процесс создания простого Hello World приложения в Electron, похожий на electron/electron-quick-start .
К концу этого урока ваше приложение откроет окно браузера, отображая веб-страницу с информацией о том, какие версии Chromium.js Node и Electron работают.
Prerequisites
Чтобы использовать Electron вы должны установить Node.js. Мы рекомендуем Вам использовать последнюю доступную LTS версию.
Пожалуйста, установите Node.js с помощью предварительно собранных установщиков для вашей платформы. В противном случае могут возникнуть проблемы совместимости.
Чтобы убедится что Node.js был установлен правильно, напишите следующие команды в терминале:
Команды должны вывести версии Node.js и npm соответственно.
Note:Так как Electron встраивает Node.js в двоичный код, выполняемая версия Node.js может отличатся.
Создание приложения
Сборка приложения
Приложения Electron имеют ту же общую структуру, что и другие проекты Node.js. Начните с создания папки и инициализации пакета npm.
Команда init запросит некоторые значения для файла конфигурации. В этом туториале стоит придерживаться следующего:
- Значение entry point должно быть main.js .
- Поля author и description могут быть любыми, но необходимы для создания пакета.
Ваш package.json файл должен выглядеть примерно так:
Далее установите пакет electron как devDependencies .
Примечание: Если у вас возникли какие-либо проблемы с установкой Electron, пожалуйста, обратитесь к руководству Advanced Installation.
Наконец, чтобы стал возможен запуск приложения, добавьте команду start в разделе scripts файла package.json , как показано далее:
Эта start команда откроет ваше приложение в режиме разработчика.
Примечание: Эта команда запускает приложение из корневой папки. На этом шаге возможна ошибка, которая заключается в том, что не найдено приложение для запуска.
Запуск main process
В процессе выполнения, Electron будет искать этот скрипт в основном поле вашего package.json конфига, который вы сконфигурировали в процессе формирования кода приложения.
Чтобы инициализировать основной скрипт, создайте пустой файл с именем main.js в корневой папке вашего проекта.
Примечание: Если вы снова запустите скрипт запуска на этот момент, ваше приложение больше не будет выявлять никаких ошибок! Тем не менее, он не будет делать ничего, потому что мы не добавили код в main.js .
Создание веб-страницы
Прежде чем мы сможем создать окно для нашего приложения, нам нужно создать контент, который будет загружен в него. В Electron каждое окно отображает веб-содержимое, которое может быть загружено из локального HTML файла или удаленного URL.
В этом туториале вы будете создавать первое. Создайте index.html файл в корневой папке проекта:
Замечание: Посмотрев на этот HTML-документ, можно заметить, что версии не указаны в блоке body. Мы вручную вставим их позже с помощью JavaScript.
Открытие веб-страницы в окне браузера
Because the main process runs Node.js, you can import these as CommonJS modules at the top of your file:
Then, add a createWindow() function that loads index.html into a new BrowserWindow instance.
Next, call this createWindow() function to open your window.
Note: At this point, your Electron application should successfully open a window that displays your web page!
Quit the app when all windows are closed (Windows & Linux)
On Windows and Linux, exiting all windows generally quits an application entirely.
Open a window if none are open (macOS)
Whereas Linux and Windows apps quit when they have no windows open, macOS apps generally continue running even without any windows open, and activating the app when no windows are available should open a new one.
Because windows cannot be created before the ready event, you should only listen for activate events after your app is initialized. Do this by attaching your event listener from within your existing whenReady() callback.
Note: At this point, your window controls should be fully functional!
Access Node.js from the renderer with a preload script
Now, the last thing to do is print out the version numbers for Electron and its dependencies onto your web page.
Note: If you need a more in-depth look at Electron processes, see the Process Model document.
This is where attaching a preload script to your renderer comes in handy. A preload script runs before the renderer process is loaded, and has access to both renderer globals (e.g. window and document ) and a Node.js environment.
Create a new script named preload.js as such:
The above code accesses the Node.js process.versions object and runs a basic replaceText helper function to insert the version numbers into the HTML document.
To attach this script to your renderer process, pass in the path to your preload script to the webPreferences.preload option in your existing BrowserWindow constructor.
We use a path relative to the currently executing JavaScript file so that your relative path will work in both development and packaged mode.
Bonus: Add functionality to your web contents
At this point, you might be wondering how to add more functionality to your application.
The code contained in renderer.js can then use the same JavaScript APIs and tooling you use for typical front-end development, such as using webpack to bundle and minify your code or React to manage your user interfaces.
Recap
After following the above steps, you should have a fully functional Electron application that looks like this:
Веб-приложения становятся все более мощными с каждым годом, но остается еще место для классических приложений, обладающих полным доступом к оборудованию компьютера. Сегодня вы можете создать десктопное приложения при помощи хорошо знакомых вам HTML, JS и Node.js, упаковать его в исполняемый файл и пользоваться им на Windows, OS X и Linux.
Существуют два самых популярных проекта с открытым исходным кодом, позволяющих сделать это. Это NW.js и Electron, последний мы и будем рассматривать сегодня. Мы собираемся переписать версию, которую делали на NW.js, так что вы сможете еще и сравнить их между собой.
Начинаем работу с Electron
Программы, которые создаются при помощи Electron это просто веб сайты, которые открываются во встроенном браузере Chromium. В дополнение к стандартным API HTML5 эти сайты могут использовать полный набор модулей Node.js и специальных модулей Electron, которые позволяют получить доступ к операционной системе.
В этом уроке мы создадим простое приложение, которое получает последние статьи с сайта Tutorialzine через RSS и отображает их в виде карусели. Все исходники, вы можете скачать архивом по ссылке. Распакуйте его содержимое в любую директорию на вашем компьютере.
Глядя на структуру файлов вы никогда бы не догадались что это десктопное приложение, а не просто веб сайт.
Мы рассмотрим наиболее интересные файлы и то как они работают минутой позже, а пока давайте заглянем под капот.
Запуск приложения
Поскольку приложение Electron это просто Node.js приложение, вам нужно установить npm. Сделать это довольно просто.
Откройте терминал и выполните в директории проекта следующую команду:
Это создаст папку node_modules, содержащую все необходимые зависимости для приложения. Затем, введите в терминале следующее:
Приложение должно открыться в новом окне, обратите внимание, что оно имеет только верхнее меню и больше ничего.
Вы наверное обратили внимание,что приложение запускается не слишком удобно для пользователя. Однако это просто способ для разработчика запустить приложение. Когда оно будет упаковано, пользователь будет запускать его как обычно — двойным кликом по иконке.
Как это сделано
Сейчас мы поговорим о наиболее важных файлах, которые используются в любом приложении, написанном при помощи Electron. Давайте начнем с файла package.json, который содержит различную информацию о проекте. Например, версию, список npm зависимостей и другую не менее важную информацию.
package.json
Если вы уже работали с Node.js, то у вас уже имеется представление как это все работает. Важно отметить команду npm start которая запускает приложение. Когда мы вызываем эту команду в консоли, то просим electron запустить файл main.js. Этот файл содержит маленький скрипт, который открывает окно приложения, определяет некоторые параметры и обработчики событий.
main.js
Давайте взглянем на то, что мы делаем в методе ready . Сначала мы определяем окно браузера и устанавливаем его первоначальный размер. Затем мы загружаем в него файл index.html, который работает точно так же, как если бы мы открыли его в браузере.
Как вы видите, в самом файле нет ничего особенного — контейнер для карусели и пункты для отображения статистики использования процессора и оперативной памяти.
index.html
Здесь у нас html-код, ссылки на необходимые стили, js библиотеки и скрипты. Заметили что jQuery подключен странным способом? См. этот issue, чтобы узнать почему подключение происходит именно так.
Наконец, собственно сам JavaScript код нашего приложения. В нем мы подключаемся к RSS ленте, получаем последние статьи и показываем их. Если мы попытаемся провернуть такую операцию в окружении браузера, то ничего не получится. Канал находится на другом домене и получение данных с него запрещено. Однако в Electron такого ограничения нет, мы можем получить необходимую информацию при помощи AJAX-запроса.
Есть одна классная вещь, в приведенном выше коде, она заключается в том, что в одном файле можно одновременно использовать:
- JavaScript библиотеки — jQuery и jQuery Flipster для создания карусели.
- Собственный модули Electron — оболочку, которая предоставляет API для desktop-задач. В нашем случае открытие url в браузере по умолчанию.
- Node.js модули — Модуль OS для доступа к информации о системе, Pretty Bytes для форматирования.
С их помощью наше приложение готово к работе!
Упаковка и дистрибуция.
Есть еще одна важная вещь, которую нужно сделать чтобы ваше приложение попало к конечному пользователю. Вы должны упаковать его в исполняемый файл, который будут запускать двойным щелчком. Необходимо будет собрать отдельный дистрибутив для каждой из систем: Windows, OS X, Linux. В этом нам поможет Electron Packager.
My personal blog. Here you can find my articles about programming, my metal music and probably other stuffs.
Упаковывание Node JS приложения в единый исполняемый файл для продакшена (Windows EXE, Mac OS, Linux)
- Get link
- Other Apps
Прошло довольно прилично времени с момента моих последний статей, и чтобы как-то вернуть в форму блог, решил начать с такой темы.
Индустрия за последние годы шагнула вперед, менялась мода, тренды, технологии в IT. Лично для меня место "базового" скриптого языка с php постепенно занял javascript, что и не мудрено, чем лаконичнее и проще язык для таких целей - тем лучше.
Но одно дело установить связку node js со всеми зависимостями и npm'ами у себя, а другое дело - все это дело как-то протащить на компьютер конечного пользователя, да так, чтобы оно еще и работало. С этого и начнем.
В этой статье я не буду затрагивать тему приложений с графическим интерфейсом, вроде electron'a, а затрону лишь часть касательно того, как сделать чтобы node.js приложение запустилось на конечном компьютере без окружения и заработало. Это отлично подойдет для консольных приложений и скриптов - где главное это результат :).
Из множества пакетов выполняющих одну и ту же роль - запаковщик node_modules вместо с node-приложением, наиболее простой и понравившийся мне (и о чудо, еще и рабочий) - стал pkg. Ставивим:
Для запаковки приложения нужно зайти в папку с приложением и добавить в package.json:
где index.js - стартовый скрипт.
Затем выполнить в консоли:
И все, получить на выходе все сборки приложений под 3 платформы (Windows, Linux, Mac OS).
На этом месте можно было бы остановиться в статье, т.к. проблем скорее всего не будет, а pkg успешно все собирет, а все скрипты и модули приложения запакуются.
Но не всегда все просто, иногда, например, нужно в приложение включить сторонние ресурсы, например какой-то исполняемый файл, или что-то другое, скрипт не всегда подхватит все импорты и require из оригинала, особенно если эти ресурсы запаковывались как-то подругому.
Давайте разберемся как добавить дополнительные ресурсы, они же будут включены в snapshot filesystem.
В первую очередь убедитесь, что ваши ресурсы испортировались примерно следующим образом через path.join:
Если это не так, то можно добавить вручную в package.json, где assets - ваши ресурсы. Если же все нужные файлы импорированы как указано в коде выше, это можно не делать, pkg сам определит нужные импорты.
Но и это не все. Одно дело иметь дело со считываемыми ресурсами, а другое с ресурсами, которые требует запуск. Доступ к таким ресурсами из snapshot filesystem не будет! Предварительно вы должны распаковать нужный файл из системы снапшотов, и только потом с ними работать как с обычным файлом. Делается это к примеру так:
Теперь с этим файлом можно работать как с обычным. Я не удивлюсь что кто-то сталкнется с другими более цугундерными проблемами, но pkg в отличии от многих других скриптов хотябы пакует рабочие варианты. Более хороший запаковщик у electron-builder, но об этом как-нибудь в другой раз.
В этой статье мы разберём основы создание приложения для ПК на
Electron js, расскажу лишь базовые принципы, как можно это всё сделать.
В качестве примере мы будем портировать пинг понг который мы сделали в одной из прошлых статей, если не знаете как его сделать, то прочитайте: «Javascript пинг понг создаём игру с использованием canvas», так как тут не будем объяснять как это сделать, а только портируем.
Ещё можете скачать этот пинг понг для браузера из моего GitHub репозитория, там он ещё не много доработан.
Electron js приложение:
Сейчас вы убедитесь что создавать приложения на javascript просто.
Базовая настройка electron:
Теперь перейдём к созданию этого приложения, для начала скажу, у вас обязательно должен быть установлен Node.js, если его нет, то посмотрите эти две статьи:
После этого инициализируем проект, для этого создаём папку с проектом, я её назову «electron-js», открою её в терминале и введу эту команду:
Таким образом у вас должна появиться файл «package.json», и теперь скачиваем electron-js, вот что пишем в терминале:
Теперь для более удобного запуска немного настроем «package.json»:
После в папке создадим ещё четыре файла:
Создание проекта:
Теперь начнём разрабатывать сам проект, первым делом нужно всё сделать во файле «main.js», заходим в него и вот что пишем:
Давайте разберём этот код, в начале мы портируем все зависимости, потом создаём функцию, которая будет создавать окно приложения.
Там мы создаём объект окна с параметрами, width и height это ширина и высота окна, которая будет при запуске, autoHideMenuBar если true то убирает верхнее меню приложения, так как мы для игры делаем, то оно нам не нужно.
Последнее что есть во функции, это win.loadFile() , оно отвечает за то, какой файл вывести в окне.
После того как закончили с функцией, начинаем отслеживать события приложения через метод on() объекта app , который мы импортировали.
Первым проверяем инициализацию electron, если она есть, то запускаем функцию createWindow() , тем самым создаём окно.
Второе проверяем закрытие окна, если окно есть, и оно открыто, то выключаем всё приложение, последние проверяем активацию приложения, если это происходит, то проверяем если нет окон, то создаём ещё одно.
Читайте также: