Node js приложение для windows

Время на прочтение
6 мин

Количество просмотров 151K

Ни для кого не секрет, что в наше время JavaScript стал одним из самых популярных языков программирования. В далекие 90е годы, в момент зарождения языка, когда он был создан с единственной целью добавить интерактивность веб страницам и улучшить процесс взаимодействия с пользователем, кто бы мог подумать, что он достигнет столь небывалых высот. Ведь сейчас на нем можно делать практически все что угодно. Хотите написать сайт: и бэкэнд и фронтэнд на JavaScript? пожалуйста! Хотите написать мобильное приложение на JavaScript? нет проблем. Программируете микроконтроллер – и тут вам на помощь придет JavaScript.

Есть конечно небольшие минусы в подходе использования JavaScript везде, но если поразмыслить, то сколько времени и сил можно сэкономить, изучив всего лишь одни язык, особенно, если то же самое приложение должно работать на разных платформах. Разных платформах говорите? Хм… Точно – разных платформах – теперь JS может позволить себе десктопные приложения для Windows, Linux, Mac, как спросите вы? Ответ прост: встречайте – NW.js.

По первым буквам можно прочитать – Node.js + Webkit, если данные понятия вам пока не знакомы, то скоро вы поймете о чем идет речь.

Node.js – программная платформа, основанная на движке V8, который транслирует наш скрипт в машинный код. Данная платформа была создана в 2009 году преимущественно для работы с бэкэндом сайтов.

WebKit — свободный движок, разработанный компанией Apple. Впервые был анонсирован в составе Safari в 2003 году
Итак, коду, написанному на JS для данной технологии, будут доступны как Node.js модули, так и стандартный браузерный API (соответственно WebKit)

Быстрый старт

Все это конечно хорошо, но с чего же начать? На github можно найти и скачать репозиторий с исходным кодом. Так же здесь можно найти прямые ссылки для скачивания под ту платформу, на которой будет вестись разработка. Помимо прочего нам понадобится установленная node.js.

После того, как необходимое ПО скачано и установлено, вы написали свое приложение на любимом JS (как это сделать читайте далее) и локализовали все в одну папку. Полдела сделано, теперь остается самое сложное и долгое – упаковать все в один файл и подготовить для распространения. Для упрощения вы можете воспользоваться готовыми библиотеками, например nw-builder. Установка библиотеки не составит труда, если вы уже работали с node.js. Как известно, в состав node.js входит менеджер пакетов npm, с которым нужно работать из командной строки. Для того, чтобы поставить какую-либо библиотеку, необходимо выполнить команду:

> npm install  [имя_библиотеки] [опции]

Обратите внимание, что библиотеку можно ставить, как локально, так и глобально, для локальной установки используйте опцию —save-dev, для глобальной -g. Таким образом поставим наш сборщик для NW.js глобально, выполнив команду:

> npm install nw-builder -g

Для того, чтобы собрать наше приложение, необходимо выполнить команду (с большим количеством опций можно ознакомиться в документации):

> nwbuild -p [имя_платформы] -o [путь_к_папке_для_собранной_версии] [путь_до_приложения]

В качестве имени платформы могут быть следующие значения: win32, win64, osx32, osx64, linux32, linux64.

Во время разработки нет нужды каждый раз собирать приложение, можно просто запустить его как есть и оно откроется в отдельном окне. Для этого нужно запустить приложение nw.exe из командной строки и передать в качестве параметров путь к папке с вашим приложением. Кроме того, если вы работаете под Windows, можно просто методом drag-n-drop перетащить папку с исходным кодом приложения на JS (обратите внимание, что именно папку целиком) в nw.exe.

Hello, world!

Теперь, когда вы знаете, как запустить приложение, как собрать его в один файл, давайте напишем что-нибудь. По традиции знакомство с новой платформой начинается с написания приложения Hello, world.

Для данного приложения, нам даже не понадобится JavaScript, только HTML. Создадим папку с названием HelloWorld. Поместим внутрь файл index.html со следующей разметкой:

<html>
  <head>
    <title> Hello, world </title>
  </head>
  <body>
    <div>
      Hello, world, from NW.js
    </div>
  </body>
</html>

Кроме того для каждого приложения под NW.js необходим файл, который обязательно должен называться package.json. Из него будет браться информация для построения приложения. Создадим простейший вариант файла и поместим в папку HelloWorld. Итак:

{
  	"name": "hello-world",
  	"version": "1.0.0",
  	"description": "First application",
  	"main": "index.html",
 	 "author": "Developer",
  	"window": {
   		 "toolbar": false,
    		"width": 500,
   		 "height": 200
 	 }
}

Содержимое файла понятно без пояснений (обратите внимание, что

обязательные поля только main и name

). В main необходимо записать файл с разметкой, который будет являться точкой входа в приложение. Секция window настраивает параметры окна (в данном случае мы отключаем панель инструментов и задаем размеры окна 500×200).

Кроме того, можно настроить такие поля как (за полным списком опций обращайтесь в документацию):

  • icon – указываем путь до иконки (переопределить стандартную)
  • position – можно указать позицию окна при загрузке (null, center или mouse)
  • min_width, min_height, max_width, max_height – ограничение размеров окна
  • resizable – логическое значение, которое показывает можно ли пользователю изменять размеры окна
  • fullscreen – включить полноэкранный режим
  • kiosk – включить режим киоска
  • transparent – сделать окно прозрачным

Приложение создано и можно его запустить. После запуска (о том как это сделать, смотри раздел выше) вы должны получить следующее окно:

Приложение написано, но в нем всего один div элемент и совсем нет логики, а что делать, если у нас богатая на элементы разметка и сложная логика? На помощь к нам приходит элемент конфигурационного файла toolbar, который мы установили в false. Для того, чтобы сделать доступными средства отладки, необходимо

установить toolbar в true

. Проделав это при запуске приложения мы получим следующее окно:

После нажатия на кнопку в верхнем правом углу откроется еще одно окно, в котором будут отображены знакомые инструменты разработчика:

Работа с нативными контролами

NW.js позволяет работать с нативными контролами. Рассмотрим работу на примере меню. Для работы с нативным UI контролами в nw.js необходимо использовать модуль nw.gui, который можно подключить следующим образом:

var gui = require('nw.gui');

Общий шаблон для использования контролов:

var element = new gui.ElementName(option);

Таким образом для создания элементов меню можно воспользоваться следующей конструкцией:

var menu = new gui.Menu();

Кроме того любые свойства созданного нами объекта можно легко изменить стандартными конструкциями JS, например так:

menu.title = 'New Title';

Меню создано, теперь нужно его заполнить, для манипуляции дочерними элементами существуют методы:

menu.append(new gui.MenuItem({label: 'Label of menu item'}));
menu.removeAt(0);

Кроме того для более гибкого добавления элементов в menu можно воспользоваться методом insert, в параметрах которого необходимо передать MenuItem и номер позиции, куда его вставить (позиция перед первым элементом соответствует 0).

Для доступа к созданным элементам можно использовать свойство items:

menu.items[0].title = "New title"

Обратите внимание, что нельзя напрямую создавать элементы:

menu.items[2] = new gui.MenuItem(); // НЕПРАВИЛЬНО

Самое главное при работе с нативными контролами, это помнить, что

любая ошибка при работе с ними может привести к краху всего приложения

, поэтому необходимо быть крайне внимательными и по возможности при удалении элементов, также присваивать переменной значение null. Таким образом для удаления контрола, можно выполнить следующее:

control.remove();
control = null;

Для более удобной работы с контролами, они унаследованы от EventEmitter, поэтому хорошая новость в том, что мы можем легко работать с событиями, например так:

menuitem.on('click', function() {
   // сделать что-нибудь полезное
});

Меню было создано, но если запустить приложение, то никакого меню вы не увидите. Для отображения меню существует метод popup, в параметрах которого необходимо передать координаты для отображения меню.

Для демонстрации основных возможностей меню добавьте следующий скрипт к созданному ранее проекту Hello, world:

var gui = require('nw.gui');
var menu1 = new gui.Menu();
menu1.append(new gui.MenuItem({label: 'Item 1'}));
	
var subMenu1 = new gui.Menu();
subMenu1.append(new gui.MenuItem({label: 'Item 2'}));
menu1.append(new gui.MenuItem({
	label: "Submenu",
	submenu: subMenu1
}));
	
document.body.addEventListener('contextmenu', function(ev) { 
	 ev.preventDefault();
	 menu1.popup(ev.x, ev.y);
	 return false;
});

После запуска приложения, мы можем увидеть созданное контекстное меню для body. Таким образом, мы можем определить контекстное меню для любого элемента.

Итак, теперь кроссплатформенные приложения может создавать каждый, но за все нужно платить. В данном случае мы жертвуем как скоростью, так и занимаемым объемом памяти (собранное приложение получается достаточно большим, более 50 Мб). Список приложений, созданных, используя данную технологию можно найти на github.

Во второй части статьи мы рассмотрим технологию более подробно.

Источник

TL;DR: @angablue/exe

Languages such as C++, C# and Python have long been used to create .exe applications for Windows. However, this isn’t commonplace for Node applications written in JavaScript. Here’s how and why I combined existing tools to create .exe files for Node.js using @angablue/exe.

What are .exe applications?

Files with the extension .exe (i.e. ending with .exe) are executable applications for the Windows platform. They contain a set of low-level CPU instructions thatare sequentially executed once a user opens the file by double-clicking it.

The problem with distributing JavaScript apps

I originally ran into this problem when trying to distribute my Node.js Gameflip bots to customers. I used to transpile my TypeScript code to JavaScript, then instruct customers to install Node.js and Python (remember some packages need node-gyp to build when installing). I would then send a zipped folder, containing the app.

This caused many headaches. Sometimes Node.js wouldn’t be added to the user’s PATH, meaning node index.js would throw an error:

'node' is not recognized as an internal or external command, operable program or batch file.

Other times, install scripts would fail, they would have 2 versions of Python etc… All in all, what should be a double click to start, could take nearly an hour of setup to get going.

The solution: compiled binaries

Compiled binaries have a few advantages over zipped bundles of JavaScript.

  • It’s a standalone file. No need to zip anything or make sure files are in the right folder; once downloaded, you’re good to go. Users don’t care about how the app works, they just want your app to work. This cuts out all the associated problems with a fragmented app.
  • Source code obfuscation. While JavaScript can be easily read, modified and reverse-engineered by anyone with the requisite knowledge, compiled binaries are far harder to read and edit. After being transformed to bytecode, the inner workings of your app become unobtainable knowledge to everyone bar the few modders and reverse engineers.
  • System agnostic. Aside from some basic requirements such as a recent-ish install of Windows (7, 10 or 11), compiled apps will work regardless of where they are given they don’t rely on external dependencies. They also have added bonus of working on any hardware, just like JavaScript running on Node.
  • Smaller build sizes. Yes, that’s right, smaller build sizes. Despite the fact that Node.js is bundled into the executable, the final build size for a moderately sized app ends up around 30MB — 40MB. Simply the node_modules folder for this project is substantially larger, sitting at 200MB, and that’s not even including the size of Node.js.

This was the solution I needed. Ever since implementing the extra step to build to .exe in my build script, I haven’t once thought of going back.

Compiling to .exe

To easily compile to an .exe, I’ve built an npm package, @angablue/exe:

 npm i @angablue/exe

Then create a build script, build.js:

1// build.js
2const exe = require('@angablue/exe');
3
4const build = exe({
5    entry: './index.js',
6    out: './build/My Cool App.exe',
7    target: 'latest-win-x64'
8});
9
10build.then(() => console.log('Build completed!'));

You can customise the appearance of the final output with a few extra fields.

1// build.js
2const exe = require('@angablue/exe');
3
4const build = exe({
5    entry: './index.js',
6    out: './build/Gameflip Rocket League Items Bot.exe',
7    pkg: ['-C', 'GZip'], // Specify extra pkg arguments
8    productVersion: '2.4.2',
9    fileVersion: '2.4.2',
10    target: 'latest-win-x64',
11    icon: './assets/icon.ico', // Application icons must be in .ico format
12    properties: {
13        FileDescription: 'Gameflip Rocket League Items Bot',
14        ProductName: 'Gameflip Rocket League Items Bot',
15        LegalCopyright: 'AngaBlue https://anga.blue',
16        OriginalFilename: 'Gameflip Rocket League Items Bot.exe'
17    }
18});
19
20build.then(() => console.log('Build completed!'));

Application Properties

The resultant output looks professional and includes useful information.

I also recommend adding this script to your package.json:

1"scripts": {
2  "package": "node ./build.js"
3}

…or for TypeScript users:

1"scripts": {
2  "build": "tsc",
3  "package": "npm run build && node ./build.js"
4}

You can tweak these values how you like to personalise the output .exe.

Under the hood

@angablue/exe is simply an abstraction, combining the power of two packages; Vercel’s pkg and resedit.

pkg performs the bulk of the work, allowing us to compile JavaScript to bytecode and bundle assets and Node.js into one package. pkg has many useful features and applications such as:

  • Compiling cross-platform apps, with options to target many versions of Node.js as well as operating systems such as Windows, macOS and Linux.
  • Bundling assets into a single package, whether they be code, images or data.
  • Centralizing dependencies, reducing reliance and the need for the end-user to install programs and libraries such as Node.js and the associated modules from npm.

Using pkg, we can actually create fully functional executables right away. However, currently pkg has no support for changing the appearance or properties of the output file. This is where resedit comes in.

resedit is a tool that allows us to directly edit certain properties of any executable file. In this case, we’re modifying the output of our pkg build, adding additional info such as an author, copyright notice, version number and an icon. Using resedit we can make our app not only function, but also look the part too.

Источник

nw

nw.js – это платформа, которая позволяет создавать кроссплатформенные десктопные приложения для windows, mac os и linux, используя веб-технологии. При этом javascript, html и css используются для построения интерфейса, а node.js(io.js) – для описания основной логики. Кроме того, Вам предоставляется высокоуровневый JS API для доступа ко многим элементам операционных систем (настройкам окна, меню, буферу обмена, системному трею и др.)

Мы все любим веб-приложения! При этом большинство софта, который мы используем на ноутбуках для работы и развлечений, – это десктопные приложения. Да-да, те самые, с иконкой на рабочем столе, которые могут висеть в памяти целыми днями или неделями (файловые менеджеры, системные утилиты, фото, аудио и видео редакторы, IDE, чаты и др.).

Что же не позволяет веб-приложениям выйти на уровень десктопных?

Я приведу всего несколько ограничений, которые есть у всех веб-приложений и которые можно преодолеть, разрабатывая десктопный софт с nw.js. Итак, я хочу, чтобы мое приложение:

  • Имело полный доступ к файловой системе, системным процессам, могло выполнять команды в командной оболочке той машины, на которой запущено.
  • Могло работать в фоне, запускаться при старте системы и оффлайн.
  • Не спрашивало подтверждения доступа при использовании камеры и микрофона.
  • Могло использовать Web Gl, Web Audio, Web RTC и т.д. в той версии браузера, которая определена мной.
  • Могло создавать элементы управления на уровне операционной системы: меню, окна, иконки в трее (менюбаре), управлять ими.
  • Могло создавать несколько окон.
  • Могло делать скриншоты.
  • Имело доступ к буферу обмена на запись и чтение.
  • Могло подписываться на системные сочетания клавиш (в том числе, когда приложение не в фокусе)
  • Могло пользоваться системной нотификацией.
  • Могло делать кроссдоменные запросы.
  • Могло изменять UserAgent
  • Могло загружать любые сайты во фрейм, который они не считали бы фреймом.
  • Могло включать полноценный полноэкранный режим kiosk-mode (как в десктопных играх).
  • Я хочу распространять и рекламировать приложение через магазины приложений.
  • И просто, но важно… Я хочу запускать приложение нажатием на иконку!

nw.js позволяет реализовать вышеописанные задумки.

Кстати, если вам удобнее воспринимать видео, нежели читать дальше, то вот запись с моего доклада на Frontend Conf. Но, хочу предупредить, в статье все описано подробне ;)

Почему браузера может быть мало?

Похожие подходы и их недостатки

На данный момент существует несколько различных технологий для создания десктопных приложений на базе веб-технологий. Вот их неполный список:

  • Adobe flash
  • Tide SDK (ex. Titanium Desktop)
  • App.js
  • Brackets Shell
  • Tint
  • И другие…

На мой субъективный взгляд, основным недостатком этих технологий является то, что обычному веб-разработчику придется немало помучиться, осваивая все тонкости API и внутренней философии любой из них. Вам нужно будет перелопатить тонны документации и примеров, чтобы просто начать что-то делать и увидеть первый результат.

С nw.js все намного проще. Если вы разрабатываете веб-приложения и имеете немного опыта работы с node.js, то уже через несколько часов вы поймете как писать и собирать десктопные приложения под mac, windows и linux.

От node-webkit к nw.js. Немного истории

roger-wang

В 2011 году разработчик из Китая Roger Wang основал проект node-webkit, основной задумкой которого стало использование веб-технологий для написания полнофункциональных кроссплатформенных десктопных приложений. Как уже понятно из названия, основными составляющими проекта стали Node.js и Webkit (Chromium).

Шли годы и в апреле 2013-го Chromium, а вместе с ним и проект node-webkit переехал на новый движок Blink (форк Webkit-а). В добавок к этому с января 2015 проект начал использовать io.js вместо node.js.

В итоге изначальное название “node-webkit” стало совсем не актуальным и было принято решение переименовать проект в nw.js. Бытует мнение, что теперь в буквах NW заложен новый смысл – “Native Web”.

Основными спонсорами проекта до сих пор являются intel и Gnor Tech.

intel-gnor-logos

Основная идея. Зачем “скрещивать” Chromium c node.js?

Когда мы говорим о десктопных приложениях, мы представляем себе некий графический интерфейс, взаимодействуя с которым мы осуществляем изменения на системном уровне операционной системы (например, копируем файлы, запускаем процессы, выполняем системные команды и т.п.)

Для того, чтобы понять всю мощь идеи nw.js, давайте коротко рассмотрим основные составляющие nwjs.

Chromium – браузер с открытым исходным кодом, который разрабатывается силами Google, Opera Software, Яндекс, NVIDIA и других компаний. В качестве движка для отображения веб-страниц в Chromium используется Blink (форк Webkit). В качестве движка для обработки JavaScript используется v8.

node.js(io.js) – это JavaScript runtime на основе движка v8, изначально используемого в Chromium. Он написан на С++ и работает на уровне протоколов прикладного уровня, где ему доступны множество различных API операционных систем, таких как файловая система и сетевые взаимодействия. В силу этого, node чаще всего используется для построения системных приложений и серверов.

iojs-and-chromium-logo

Основной идеей nw.js является объединение Chromium и node.js в единый контекст, используя один и тот же v8. Если сказать точнее, node.js использует v8 Chromium-a. Т.е. при помощи Chromium мы можем создать графический интерфейс на основе html, css, js, как и в любом веб-браузере. Но, в отличие от обычного браузера, nw.js позволяет из этого же контекста вызывать функции node.js для работы с системными API операционной системы.

Давайте разберем простейший пример. При помощи модуля fs для io.js мы будем следить за изменениями какого-нибудь файла в системе. В случае, если файл изменился, отобразим его содержимое в div-e c id=”log”.

js

var fs = require('fs');
var path = '/usr/local/var/log/nginx/error.log';
fs.watchFile(path, function(a){
  document.getElementById('log').innerHTML = fs.readFileSync(path, {encoding:'utf8'});
});

Как мы видим, здесь нет сервера и клиента, нет ajax, нет сокетов, нет http, нет обмена данными по сети. Как мы говорили, вся прелесть nwjs заключается в возможности работы с node.js из контекста Chromium.

Как они это сделали

Разработчики nw.js приложили немало усилий для обеспечения единого event loop и построения “моста” между контекстами node.js и chromium. Здесь можно почитать подробнее о технических деталях и проблемах, возникших при реализации этой задумки.

Начинаем погружение

Для начала скачайте и установите последнюю версию nw.js для Вашей платформы. Далее следуйте указаниям документации для настройки командной строки и алиасов для Вашей операционной системы.

Структура приложения nw.js

Приложение для nw.js состоит из обычных html, css, js файлов, структурированных произвольно. Нет никаких дополнительных правил и условностей по их компоновке.

project-structure-nwjs

При запуске nw.js ищет файл манифеста package.json.

Пример package.json

{
  "main": "index.html",
  "name": "dummydemo",
  "description": "Dummy demo of nnwjs app",
  "version": "0.0.1",
  "keywords": [ "demo", "nwjs" ],
  "window": {
    "title": "Dummy demo",
    "icon": "icon.png",
    "toolbar": false,
    "frame": true,
    "width": 700,
    "height": 400,
    "position": "mouse",
    "min_width": 400,
    "min_height": 200,
    "max_width": 800,
    "max_height": 600
  },
  "author": "nedudi",
  "license": "MIT",
  "dependencies": {
    "moment": "latest",
    "handlebars": "^2.0.0"
  }
}

Этот файл ничем не отличается от обычного package.json в node.js, за исключением того, что он содержит дополнительные параметры: window, user-agent, chromium-args, js-flags и другие. Они позволяют nw.js настраивать и контролировать поведение Chromium и его окружения, добавлять флаги при запуске node.js, менять режим отображения, размеры окна, иконки, точку входа в приложение и множество других установок.

Для примера мы создадим файл index.html и добавим немного CSS.

index.html

<div class="hello">
  Привет, NW.JS!
</div>

Затем откроем консоль и наберем:

$ nw my/lovely/app

где my/lovely/app – путь к папке с приложением, а nw – правильно настроенный алиас для nw.js

И все! В результате запустится десктопное приложение, которое выглядит примерно так:

nwjs-window-frame-toolbar

Настройка отображения окна

Результат, который мы видим очень похож на обычный браузер с адресной строкой. В принципе, это и есть браузер! Да-да, тот самый Chromium, о котором мы говорили.

Однако, в большинстве случаев хочется, чтобы наше творение не выглядело как браузер, а больше походило на привычное десктопное приложение.

Для этого существует целый ряд настроек, доступных в package.json. Давайте подробнее остановимся на некоторых из них.

Для начала можем убрать тулбар.

package.json

...
"window": {
  "toolbar": false
}
...

nwjs-window-frame

При желании можно скрыть фрейм окна.

package.json

...
"window": {
  "toolbar": false,
  "frame": false
}
...

nwjs-window

Или вообще убрать фон окна, оставив только контент.

package.json

...
"window": {
  "toolbar": false,
  "frame": false,
  "transparent": true
}
...

nwjs-window-transparent

Kiosk-mode

Еще одной мощной опцией является возможность запуска приложений в Kiosk-mode. Этот режим часто используется в десктопных играх, а также на экранах в публичных местах (например, для показа рекламы на больших мониторах). Выйти из приложения, запущенного в Кiosk-mode не так просто как из браузерного fullscreen. Это можно сделать только при помощи методов API nw.js, Alt-Tab или Ctrl-Alt-Del(Windows), поэтому, разрабатывая приложения, работающие в этом режиме, Вы сами должны позаботиться о наличии в интерфейсе некоторой кнопки “Выход”, которая поможет пользователю его закрыть.

package.json

... 
"window": {
  "kiosk": true
}
...

nwjs-macbook-kiosk

Ну и, наконец, мы просто можем скрыть окно, оставив приложение в фоновом режиме

"window": {
   "show": false
}

Элементы интерфейса операционной системы.

Nw.js позволяет создавать и управлять элементами интерфейса операционной системы, характерными для десктопных приложений (меню окна, трей, контекстные меню). Также Вы можете получить доступ к буферу обмена, сочетаниям системных клавиш и т.п.

Для этого потребуется всего лишь подключить модуль nw.gui, который уже есть в стандартной поставке. Он дает возможность абстрагироваться от реализации элементов интерфейса в конкретной операционной системе, предоставляя общий API.

var gui = require('nw.gui');

gui.Window.get(); //окно
gui.Shell(); //оболочка
gui.Tray // трей
gui.Menu // менюшки
gui.Clipboard // буффер обмена
gui.Shortcut // сочетания клавиш
// ...и другие элементы

А теперь давайте посмотрим подробнее на некоторые из вышеописанных возможностей.

Создание системных контекстных меню

js

// Создать пустое меню
var menu = new gui.Menu();
// Добавить в него пункты или разделители
menu.append(new gui.MenuItem({ label: 'Ничего не делать' }));
menu.append(new gui.MenuItem({ type: 'separator' }));
// .. и повесить на них обработчики
menu.append(new gui.MenuItem({
  label: 'Сказать "Привет!"',
  click: function() {
    alert('Привет!')
  }
}));

// Показывать в виде контекстного меню
document.body.addEventListener('contextmenu', function(e) { 
  e.preventDefault();
  // В том месте, где мы кликнули
  menu.popup(e.x, e.y);
  return false;
}, false);

Вот что мы получим в итоге при клике правой клавишей на окне:

nwjs-window-cmenu

Создание меню окна

js

// Создать верхнее меню
var menubar = new gui.Menu({ type: 'menubar', title: 'Menu Title' });

// В качестве вложенных меню используем такой же код, как в примере c контекстным меню.
menubar.append(new gui.MenuItem({ label: 'Главное', submenu: menu}));
menubar.append(new gui.MenuItem({ label: 'О нас', submenu: menu}));

//Получить текущее окно и подключить к нему верхнее меню
gui.Window.get().menu = menubar;

Результат:

nwjs-window-menubar

Создание иконок и меню в трее (менюбаре)

js

// Создаем иконку в трее (менюбаре)
var tray = new gui.Tray({ 
  title: 'ololo', 
  icon: 'icon.png',  
  alticon: 'icon.png'
});

// Добавляем меню при клике на иконке в трее
var traymenu = new gui.Menu();
traymenu.append(new gui.MenuItem({label: 'Тот', type: 'checkbox'}));
traymenu.append(new gui.MenuItem({label: 'Этот', type: 'checkbox' }));
traymenu.append(new gui.MenuItem({label: 'Другой', type: 'checkbox'}));
traymenu.append(new gui.MenuItem({type: 'separator' }));
// В качестве вложенных меню используем такой-же код как в примере c контекстным меню.
traymenu.append(new gui.MenuItem({label: 'или ...',   submenu: menu}));

tray.menu = traymenu;

Результат:

nwjs-window-tray

Обработка сочетаний клавиш

js

var shortcut = new gui.Shortcut({
  key : "Ctrl+Shift+L",
  active : function() {
    console.log('Нажато сочетание клавиш', this.key)
  },
  failed : function(msg) {
    // невозможно зарегистрировать такое сочетание клавиш
    // возможно, оно уже занято
    console.log(msg);
  }
});

// регистрируем сочетание клавиш в системе
gui.App.registerGlobalHotKey(shortcut);

// отписываемся от сочетания клавиш в системе
gui.App.unregisterGlobalHotKey(shortcut);

Работа с буфером обмена

js

var clipboard = gui.Clipboard.get();

// получить значение
var text = clipboard.get('text');

// установить значение
clipboard.set('Привет', 'text');

// очистить буфер
clipboard.clear();

Хранение данных и ресурсов в приложениях на nw.js

Многим десктопным приложениям необходимо хранить временные данные между перезапусками и во время работы. Например, это могут быть результаты игры, список последних проектов, фото, видео и тп.

Эту задачу можно разделить на 2 части:

1) Хранение структурированных данных 2) Хранение локальных статических ресурсов (фото, видео и других файлов)

Хранение структурированных данных

На сегодняшний день в арсенале разработчика есть несколько встроенных браузерных API. Все они есть в Chromium, который является частью nw.js

  • Web SQL database
  • Indexed DB
  • Local storage
  • Session storage
  • Application cache

Мы не будем останавливаться на каждом из них. Подробнее об удобных плагинах для работы с этими API можно почитать здесь.

Хранение локальных статических ресурсов

Для хранения файлов нужно использовать специально предусмотренную директорию App.dataPath. Её расположение будет зависеть от операционной системы и имени проекта

  • Windows %LOCALAPPDATA%/<name>
  • Linux ~/.config/<name>
  • OSX ~/Library/Application Support/<name>

где <name> – это поле, заданное в package.json

Используя эту директорию, Вы можете быть уверены, что файлы будут храниться в надежном месте, вне зависимости от операционной системы.

Отладка

Для отладки можно использовать кнопку на верхней панели.

nwjs-window-debugger

Она запустит привычный отладчик (в точности такой же, как в браузере Chrome).

Более того, Вы можете запустить nw.js c флагом --remote-debugging-port:

$ nw --remote-debugging-port=1234 app

После этого отладчик будет доступен по ссылке http://localhost:1234

Кроме этого, есть возможность делать Livereload приложения при каждом изменении в коде. Почитать об этом подробнее можно здесь.

Сборка приложений на nw.js

Подробный мануал по сборке приложений под разные платформы есть здесь. Но, если честно, читать его при написании собственного приложения в первый раз я бы не советовал. Он понадобится Вам при работе со специфическими решениями и подходами.

В стандартных же случаях лучше использовать готовый плагин node-webkit-builder.

Все что нужно сделать, это установить node-webkit-builder и запустить команду nwbuild с указанием пути к папке приложения.

$  npm i -g node-webkit-builder
$  nwbuild ./

Если требуется собрать приложение под конкретные операционные системы, их список можно задать с помощью флага -p

$  nwbuild ./ -p win32,win64,osx32,osx64,linux32,linux64

При этом nwbuild сам скачает последние версии nw.js и сделает сборки для всех указанных платформ (каждую в отдельной папке).

Вот что получилось у меня после открытия собранного тестового приложения в различных ОС:

Mac OS

macnwjs

Windows

windows-nwjs

Ubuntu

ubuntu-nwjs

Примеры приложений на nw.js

Popcorn time

Крутое приложение. Позволяет стримить фильмы и сериалы с торрентов. Вы просто выбираете то, что хотите смотреть при помощи красивого интерфейса не заботясь о технических подробностях.

popcorntime.io

popcorn-time

Mongo management studio

Mongo Management Studio – клиент для mongodb. Удобный интерфейс для выполнения команд и просмотра структуры коллекций. litixsoft.de/english/mms

mong-management-studio

Lighttable

Lighttable – IDE для разработчиков с уникальным интерфейсом и пождходом (правда я так и не понял в чем его прелесть). С виду похож на sublime или atom.

lighttable.com

lighttable

Spreaker

Spreaker позволит Вам стать радиоведущим и вещать аудио в сеть. Сделано при помощи node-webkit, portaudio и lame.

Mac: download.spreaker.com/spreaker-osx.dmg Win: download.spreaker.com/spreaker-win.exe

spreaker

sizeChecker

sizeChecker – предаставляет удобный интерфейс для слежения и управления местом на вашем лаптопе/маке/pc.

github.com/airbob/sizeChecker

sizechecker

Sdal za mig (Сдал за миг)

Приложения для сдачи налоговых отчетов для российского рынка. Доступно в виде веб-приложения, десктопного приложения и приложения для терминалов (инфо-киосков).

sdalzamig

Здесь можно найти еще множество приложения и идей для nw.js.

Что еще почитать по nw.js?

  • Очень толковый вики – github.com/nwjs/nw.js/wiki
  • Комьюнити в Гиттере – gitter.im/nwjs/nw.js
  • Статьи по nw.js – github.com/nwjs/nw.js/wiki/Tutorials-on-Node-WebKit
  • Доклад от создателя nw.js – youtube.com/watch?v=y6r8_8vak5k

Выводы

Почему уже можно использовать nw.js и веб-технологии для десктопных приложений?

1) Легкая кроссплатформенность (Mac, Linux, Windows)
2) Работает достаточно быстро.
3) Нарастающий тренд использования веб-приложений во всех сферах.
4) Легко писать приложения для себя (например, графический интерфейс для часто выполняемых рутиных операций).
5) Дешево во всех отношениях (обучение, разработка, поддержка)!

Жду вопросов и Ваших отзывов и мнений в комментариях ;)

Источник

Данный материал является вольным переводом статьи:
Danny Markov Creating Your First Desktop App With HTML, JS and Electron

Материал вычитывал: Михаил Синяков

Веб-приложения становятся все более мощными с каждым годом, но остается еще место для классических приложений, обладающих полным доступом к оборудованию компьютера. Сегодня вы можете создать десктопное приложения при помощи хорошо знакомых вам HTML, JS и Node.js, упаковать его в исполняемый файл и пользоваться им на Windows, OS X и Linux.

Существуют два самых популярных проекта с открытым исходным кодом, позволяющих сделать это. Это NW.js и Electron, последний мы и будем рассматривать сегодня. Мы собираемся переписать версию, которую делали на NW.js, так что вы сможете еще и сравнить их между собой.

Программы, которые создаются при помощи Electron это просто веб сайты, которые открываются во встроенном браузере Chromium. В дополнение к стандартным API HTML5 эти сайты могут использовать полный набор модулей Node.js и специальных модулей Electron, которые позволяют получить доступ к операционной системе.

В этом уроке мы создадим простое приложение, которое получает последние статьи с сайта Tutorialzine через RSS и отображает их в виде карусели. Все исходники, вы можете скачать архивом по ссылке.
Распакуйте его содержимое в любую директорию на вашем компьютере.

Глядя на структуру файлов вы никогда бы не догадались что это десктопное приложение, а не просто веб сайт.

Мы рассмотрим наиболее интересные файлы и то как они работают минутой позже, а пока давайте заглянем под капот.

Запуск приложения

Поскольку приложение Electron это просто Node.js приложение, вам нужно установить npm. Сделать это довольно просто.

Откройте терминал и выполните в директории проекта следующую команду:

npm install

Это создаст папку node_modules, содержащую все необходимые зависимости для приложения. Затем, введите в терминале следующее:

npm start

Приложение должно открыться в новом окне, обратите внимание, что оно имеет только верхнее меню и больше ничего.

Вы наверное обратили внимание,что приложение запускается не слишком удобно для пользователя. Однако это просто способ для разработчика запустить приложение. Когда оно будет упаковано, пользователь будет запускать его как обычно — двойным кликом по иконке.

Как это сделано

Сейчас мы поговорим о наиболее важных файлах, которые используются в любом приложении, написанном при помощи Electron. Давайте начнем с файла package.json, который содержит различную информацию о проекте. Например, версию, список npm зависимостей и другую не менее важную информацию.

package.json


{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "dependencies": {
    "pretty-bytes": "^2.0.1"
  },
  "devDependencies": {
    "electron-prebuilt": "^0.35.2"
  },
  "scripts": {
    "start": "electron main.js"
  },
  "author": "",
  "license": "ISC"
}

Если вы уже работали с Node.js, то у вас уже имеется представление как это все работает. Важно отметить команду npm start которая запускает приложение. Когда мы вызываем эту команду в консоли, то просим electron запустить файл main.js. Этот файл содержит маленький скрипт, который открывает окно приложения, определяет некоторые параметры и обработчики событий.

main.js


var app = require('app');  // Модуль управления приложением.
var BrowserWindow = require('browser-window');  // Модуль для создания окна браузера.

// Сохраняем глобальную ссылку на объект Window, если этого не сделать
// окно закроется автоматически как только сработает сборщик мусора JS.
var mainWindow = null;

// Выйти, после того как все окна будут закрыты.
app.on('window-all-closed', function() {
    // В OS X это характерно для приложений и их меню,
    // чтобы оставаться активными, пока пользователь явно не завершит работу 
    // при помощи Cmd + Q
    if (process.platform != 'darwin') {
        app.quit();
    }
});

// Этот метод будет вызван когда Electron закончил
// инициализацию и готов к созданию окна браузера.
app.on('ready', function() {
    // Создаем окно браузера.
    mainWindow = new BrowserWindow({width: 900, height: 600});

    // и загружаем index.html в приложение.
    mainWindow.loadURL('file://' + __dirname + '/index.html');

    // Генерируется когда окно закрыто.
    mainWindow.on('closed', function() {
        // Сброс объекта окна, обычно нужен когда вы храните окна
        // в массиве, это нужно если в вашем приложении множество окон, 
        // в таком случае вы должны удалить соответствующий элемент.
        mainWindow = null;
    });
});

Давайте взглянем на то, что мы делаем в методе ready. Сначала мы определяем окно браузера и устанавливаем его первоначальный размер. Затем мы загружаем в него файл index.html, который работает точно так же, как если бы мы открыли его в браузере.

Как вы видите, в самом файле нет ничего особенного — контейнер для карусели и пункты для отображения статистики использования процессора и оперативной памяти.

index.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tutorialzine Electron Experiment</title>
    <link rel="stylesheet" href="./css/jquery.flipster.min.css">
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<div class="flipster">
    <ul>
    </ul>
</div>





  



                       
  





<p class="stats"></p>
<!-- Правильный способ подключить jQuery в Electron приложении -->
<script>window.$ = window.jQuery = require('./js/jquery.min.js');</script>
<script src="./js/jquery.flipster.min.js"></script>
<script src="./js/script.js"></script>
</body>
</html>

Здесь у нас html-код, ссылки на необходимые стили, js библиотеки и скрипты. Заметили что jQuery подключен странным способом? См. этот issue, чтобы узнать почему подключение происходит именно так.

Наконец, собственно сам JavaScript код нашего приложения. В нем мы подключаемся к RSS ленте, получаем последние статьи и показываем их. Если мы попытаемся провернуть такую операцию в окружении браузера, то ничего не получится. Канал находится на другом домене и получение данных с него запрещено. Однако в Electron такого ограничения нет, мы можем получить необходимую информацию при помощи AJAX-запроса.


$(function(){

    // Отображаем информацию о компьютере используя node-модуль os.

    var os = require('os');
    var prettyBytes = require('pretty-bytes');

    $('.stats').append('Number of cpu cores: <span>' + os.cpus().length + '</span>');
    $('.stats').append('Free memory: <span>' + prettyBytes(os.freemem())+ '</span>');

    // Библиотека UI компонентов Electron. Понадобится нам позже.

    var shell = require('shell');


    // Получаем последние записи с Tutorialzine.

    var ul = $('.flipster ul');

    // Политики безопасности в Electron не применяются, поэтому
    // мы можем отправлять ajax-запросы на другие сайты. Обратимся к Tutorialzine

    $.get('http://feeds.feedburner.com/Tutorialzine', function(response){

        var rss = $(response);

        // Найдем все статьи в RSS потоке:

        rss.find('item').each(function(){
            var item = $(this);

            var content = item.find('encoded').html().split('</a></div>')[0]+'</a></div>';
            var urlRegex = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/g;

            // Получим первое изображение из статьи.
            var imageSource = content.match(urlRegex)[1];


            // Создадим li для каждой статьи и добавим в неупорядоченный список.

            var li = $('<li><img /><a target="_blank"></a></li>');

            li.find('a')
                .attr('href', item.find('link').text())
                .text(item.find("title").text());

            li.find('img').attr('src', imageSource);

            li.appendTo(ul);

        });

        // Инициализируем плагин flipster.

        $('.flipster').flipster({
            style: 'carousel'
        });

        // При клике на статью откроем страницу в браузере по умолчанию.
        // В противном случае откроем ее в окне Electron.

        $('.flipster').on('click', 'a', function (e) {

            e.preventDefault();

            // Откроем URL в браузере по умолчанию.

            shell.openExternal(e.target.href);

        });

    });

});

Есть одна классная вещь, в приведенном выше коде, она заключается в том, что в одном файле можно одновременно использовать:

  • JavaScript библиотеки — jQuery и jQuery Flipster для создания карусели.
  • Собственный модули Electron — оболочку, которая предоставляет API для desktop-задач. В нашем случае открытие url в браузере по умолчанию.
  • Node.js модули — Модуль OS для доступа к информации о системе, Pretty Bytes для форматирования.

С их помощью наше приложение готово к работе!

Упаковка и дистрибуция.

Есть еще одна важная вещь, которую нужно сделать чтобы ваше приложение попало к конечному пользователю. Вы должны упаковать его в исполняемый файл, который будут запускать двойным щелчком. Необходимо будет собрать отдельный дистрибутив для каждой из систем: Windows, OS X, Linux. В этом нам поможет Electron Packager.

Вы должны принять во внимание тот факт, что в упакованный файл попадут все ваши ресурсы, все зависимости node.js, а так же уменьшенная копия браузера webkit. В конечном итоге получится файл порядка 50mb. Это довольно много и не практично для простых приложений, как, например, наше, но этот вопрос становится не актуальным, когда речь идет о больших и сложных приложениях.

Заключение

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

Вот что можно еще почитать по теме:

  • Electron’s Quick Start Guide
  • Electron’s Documentation
  • Apps Built with Electron
Источник

Хотя Node известен как серверная платформа, интерес к его использованию для создания настольных приложений OS Windows быстро растет. Привязки существуют для наборов инструментов GUI, таких, как GTK +, QT и Cocoa. Однако одним из преимуществ Node для веб-разработки является возможность применения одного и того же языка, как на сервере, так и на клиенте. Он хорошо функционирует вместе с оболочкой веб-браузера для разработки кроссплатформенных настольных приложений и игр JS Windows, использующих WebGL с HTML, CSS и JS.

Краткая история кода

JavaScript всегда был языком программирования или, скорее, сценарием в интернете. Он был впервые представлен в 1995 году и тогда не назывался JS Windows. Во время своей ранней разработки он носил имя Mocha, который представлял собой игру слов на Java, популярнейшем языке программирования для веб-серверов того времени. Затем он был изменен на JavaScript в веб-браузере Netscape Navigator. Наконец, позже он был переименован в JavaScript с очень ограниченной областью применения.

JavaScript в веб-браузере Netscape Navigator.

Благодаря улучшениям, внесенным в спецификации ECMAScript, JS стал современным языком программирования браузеров. Благодаря вседоступности и повсеместности, он стал одним из трех столпов интернета наряду с HTML и CSS. Тем не менее, современный уровень использования ИТ-технологий требует запуска за пределами браузера.

Так, в 2009 году по инициативе Райана Даля родился Node — бесплатная среда исполнения JavaScript с открытым исходным кодом, которая позволяет запускать JS за пределами браузера в виде JS Windows. Написанный JS-код работает в любой ОС, в которой установлен Node, что делает кроссплатформенный аспект интернета доступным для всех.

Принцип функционирования

Принцип функционирования

Node.js предоставляет API, которые недоступны в среде браузера. Они имеют меньше ограничений. Например, используется API файловой системы для доступа и управления ОС. Он предоставляет разработчику основные операции CRUD: создание, чтение, обновление и удаление. По соображениям безопасности это невозможно выполнить в браузерах. По сути, JavaScript становится более мощным и опасным приложением.

Есть моменты, когда пользователю нужно включить внешний код в собственную программу. Например, если при использовании jQuery вставляют тег removed, который импортирует функциональные возможности приложения. То же самое касается обычных сценариев, которые пользователи пишут самостоятельно. Можно просто импортировать любой файл JS с removed тегом. Однако это может стать громоздким и придется вручную управлять сотнями зависимостей.

В этом случае Node.js приходит на помощь. Каким образом? Перед тем как установить Node JS на Windows или другую ОС, от пользователя не потребуется никакой модернизации устройств, поскольку ПО предоставляет простой способ управления зависимостями. Он поставляется с менеджером пакетов (NPM). Через него внешние данные можно импортировать в пользовательские проекты как зависимости.

Области применения пакетов:

  1. Серверы.
  2. Управление базой данных.
  3. Веб-приложения.
  4. Настольные и мобильные приложения.
  5. Робототехника.

Характеристики:

  1. Быстрое выполнение кода.
  2. Высокая масштабируемость.
  3. Многофункциональность и асинхронность.
  4. Отсутствие буферизации.

Сравнение: Node.js и JavaScript

Сравнение: Node.js и JavaScript

Браузеры имеют встроенный интерпретатор для JS. Node — это одновременно и среда для него, включает в себя набор библиотек для использования JS в качестве языка программирования общего назначения с акцентом на асинхронность и неблокирующие операции. На самом деле, код запускает тот же интерпретатор, что и Google Chrome (V8), но предоставляет другой набор библиотек и другую среду выполнения. Он также включает в себя систему управления пакетами (NPM) и несколько языковых расширений, которых нет в браузерах, например, модули.

Таким образом, интерпретатор JS в Google Chrome и аналогичная программа JS приложений для Windows в Node по сути одинаковы. Разница в том, что в браузере конечной целью является изменение содержимого веб-страницы — текста, графики, таблиц стилей и других, а в Js — запуск кода общего назначения, который может выполнять любые действия (от активации веб-сервера до манипулирования файлами).

Настольные утилиты

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

Настольные приложения

Легко создавать мощные настольные утилиты с использованием веб-технологий, например, с NW.js.Такие программы существуют уже давно. В Шанхае в 2011 году Роджер Ванг из Центра технологий открытого исходного кода Intel написал node-webkit — модуль для проверки концепции, который позволяет пользователю создавать окно браузера и Node.

После некоторого прогресса и перехода от WebKit и Chromium, ПО с открытым исходным кодом, на котором основан Google Chrome, к проекту присоединился Чен Чжао. Вместе они создали среду выполнения приложений на Node и Chromium. Проект node-webkit стал довольно популярным и позже был переименован в NW.js.

Загружая его, пользователь на самом деле запускает Chromium плюс Node.js, а также сам код приложения. Это не только означает, что ПО для настольного компьютера может быть создано с использованием HTML, CSS и JavaScript, но оно также будет иметь доступ ко всем API-интерфейсам Node, например, для чтения и записи на диск.

Оба проекта построены на основе Chromium и Node, так что можно писать настольные приложения, используя его на системном уровне и веб-технологии для уровня GUI.

Технологии для уровня GUI

У Electron есть некоторые преимущества:

  1. Более популярен среди разработчиков.
  2. Имеет лучшую корпоративную поддержку. Github и Microsoft отстают от Electron, а NW.js спонсируется Intel.
  3. Предлагает механизм автоматического обновления из коробки.
  4. Процесс его сборки немного проще, потому что не нужно объединять весь Chromium.

Преимущества NW.js:

  1. Поддержка устаревших систем: Windows XP и более старые версии Mac OS. Несмотря на то, что Microsoft отказалась от поддержки XP, но многие пользователи все еще используют ее, поэтому такой сервис им крайне необходим.
  2. Главная запись приложения может быть как HTML-страницей, так и файлом Node.js.
  3. Он более ориентирован на браузер.
  4. Подход к нему намного проще и понятнее. Это дает пользователям много вариантов.
  5. Отдельный и смешанный контексты.
  6. Он имеет простой, но мощный механизм в отношении контекста JavaScript, а «Электрон» имеет два отдельных контекста основной и рендеринг, которые полностью разделены.
  7. Расширения Chrome и поддержка API Chrome. Более того, можно запускать приложения и расширения «Хром» с помощью NW.js. «Электрон» не может и не будет делать это.
  8. Поддерживает файлы PDF «из коробки», используя собственный плагин Chrome PDF.
  9. Имеет инструмент защиты источника. Это позволяет скомпилировать JavaScript в байт-код V8.
  10. Использует последнюю версию Chromium
  11. Можно использовать ПО без Dev Tools.
  12. Поддерживает ключи командной строки Chromium. Для получения дополнительной информации необходимо обратится к NW.js документации. Эти переключатели могут быть использованы для настройки производительности.
  13. Лучшая модель безопасности для настольных приложений. Таковая в Chrome (и веб-браузерах в целом) немного ограничена из-за характера пользовательского отношения к веб-сайтам. NW.js предоставляет другую модель, которая позволяет обойти все ограничения безопасности, такие как, например, песочница.

Начало работы с программой

Начало работы с программой

Можно скачать две версии Node.js. На начальном этапе не имеет значения, какую из них выбрать. Версия долгосрочной поддержки считается самой стабильной. Она обновляется только при необходимости исправления ошибок и базовым обслуживанием. Эта версия предпочтительна в производственных условиях и значительно стабильнее. Она часто снабжается новыми функциями.

Благодаря более быстрому циклу обновления, у ПО есть самые современные API и технологии для разработчиков. После прохождения процесса установки его можно проверить, открыв командную строку.

Когда программа будет активирована, можно запустить интерпретатор JavaScript. На данный момент Node позволяет писать JS в консоли в DevTools, в командной строке. Для того чтобы выйти из интерпретатора, дважды нажимают «Ctrl + C» вводят exit.

Можно ввести весь JavaScript, который нужен в интерпретаторе. Сначала удостоверяются, что пользователь находится в каталоге с файлом, прописывают: cd /path/to/the/file и ожидают, пока не откроется нужный каталог. Далее набирают «node» для запуска файла. Например, прописывают «node filename.js» для активации «filename.js». Можно опустить .js расширение файла, набрав «node filename». Node подразумевает, что «filename» — это JS файл.

Основы применения NPM

Node.js позволяет запускать JavaScript за пределами браузера. Для того чтобы помочь управлять внешними зависимостями, установка поставляется с NPM. Помимо хранения метаданных проекта, package.json файл также отслеживает эти зависимости. Официальная документация по Node является основным справочным материалом для всего, что касается ПО.

Код можно разделить на импортируемые и экспортируемые модули. NPM предоставляет более простой способ управления зависимостями. Допустим, нужно использовать Lodash в коде. Сначала инициализируют новый проект, запустив npm init в каталоге проекта. По запросу заполняют необходимую информацию о package.json. Здесь хранятся все метаданные.

Загрузка Lodash

Предполагая, что пользователь находится в правильном каталоге, выполняют это, запустив npm install lodash. Зависимость загружается в папку с именем node_modules. Она имеет тенденцию накапливать много файлов, как только вводятся больше зависимостей в проект. После установки Lodash создают JS файл в текущем каталоге, который использует Lo Dash. В нем импортируют Lodash, вызвав require функцию.

Основы применения NPM

Как упоминалось ранее, Node.js предоставляет API. Это встроенный модуль, который поставляется с каждой установкой. Можно импортировать этот код, также вызывая require функцию. Запуск JS файла приведет к записи Hello World в текст с именем dev to.txt.

Этот fs.writeFile метод является лишь одной из многих функций fs, предлагаемых модулем. Все доступные методы и свойства API описаны в документации.

Экспорт модулей

Если потребуется импортировать собственный код из разных файлов, JS сначала экспортируют код файла JavaScript. Затем, используя require функцию, загрузит его в другой. На самом деле, это не так запутано, как кажется.

Скажем, существует четыре JS файла в одном каталоге с именем index.js, add.js, username.js и dog.js. Задача add.js состоит в том, чтобы предоставить функцию, которая возвращает сумму двух входных данных. Можно экспортировать ее, назначив add параметр module.exports свойству.

Работа username.js состоит в том, чтобы экспортировать строку Some Dood. Или все, что угодно. Имеется в виду, что можно присвоить значение любого типа module.exports. Это означает, что экспортируют строки, числа, логические значения, символы, функции, классы, массивы и объекты.

Экспорт модулей

Можно вызвать эти три файла index.js, используя require функцию. Нужно предоставить абсолютные или относительные пути к ним, чтобы явно указать Node.js, что импортируют они из файлов, а не из встроенных модулей или из node_modules папки проекта, при этом можно опустить .js расширение. Функция «required» возвращает фактическое значение, которое было назначено на соответствующий module.exports файл.

Установка и запуск приложения

Очень простой первый шаг в мир JS выполняют, используя командную строку и прописывая первый бит кода Node.

Алгоритм запуска JS скрипта Windows:

  1. Загрузить последнюю версию программы, например, V6.2.2.
  2. Устанавливают Node npm install, следуя инструкциям.
  3. После завершения активации находят значок в параметре поиска Windows и открывают программу.
  4. Теперь можно продолжить, сделать некоторые вычисления и попытаться напечатать сообщения на консоли.
  5. Действия покажут, что узел успешно установлен в системе и работает должным образом.
  6. Нажимают Ctrl + C дважды, чтобы выйти из узла и снова получить путь к каталогу.
  7. Настраивают среду командной строки Windows для приложения.
  8. Загружают и запускают установкой с сайта разработчика JS Windows open.
  9. Запускают cmd.exe.
  10. Нажимают Windows + R на клавиатуре.
  11. Набирают cmd и нажимают ввод.
  12. Проверяют, успешно ли установлен узел, набрав node -v, он должен ответить «v #. #. #», где «#» означает число
  13. Перезагружают компьютер, если узел -v не отвечает правильно.
  14. Пробуют автоматически установить все зависимости с помощью команды npm install.
  15. Запускают сервер, выполнив «приложение узла» в корневой папке сервера.

Если предыдущий шаг не удался, устанавливают зависимость вручную, выполнив следующие команды:

  • «npm install»;
  • «npm install express -g»;
  • «npm install url -g»;
  • «npm install fresh -g»;
  • «npm install cookie -g»;
  • «npm install crc -g»;
  • «npm install send -g»;
  • «npm install connect -g»;
  • «npm install commander -g».

Настройка Node JS Windows 10

Настройка Node JS Windows 10

Разработка с использованием js для Windows раньше была довольно громоздкой, но сейчас она стала намного проще. В сети имеются новейшие инструменты и приложения с возможностью использовать 64-битной версии.

Алгоритм установки:

  1. Устанавливают Git, используя настройки по умолчанию.
  2. Местом установки выбирают папку Projects в домашнем каталоге, если ее нет, то предварительно создают для проекта.
  3. Нажимают правой кнопкой мыши на папку, выбирают Git bash here и проверяют версию git, прописывая: git-version.
  4. Создают .bash_profile, который будет выполняться при открытии окна bash. Это не окно cmd.exe, поэтому проверяют параметры. Нажимают на значок в верхнем левом углу. Можно вставить текст с помощью средней кнопки мыши, как на популярных терминалах Linux.
  5. Устанавливают Node.js в Windows 10, используя версию LTS. Не рекомендуется активировать несколько версий одновременно, поскольку менеджер узлов (NVM) официально не поддерживает Windows, но, тем не менее, есть альтернативы, такие, как nvm-windows или nodist.
  6. Node поставляется с npm, менеджером пакетов, который доступен после установки.
  7. Открывают оболочку bash и проверяются версии с помощью: npm —version. Если npm равен 2.x, следует обновить его до версии 3, что решает многие проблемы, например, обрабатывает зависимости от пиров.
  8. Находят Powershell в меню «Пуск», запускают его от имени администратора и выполняют установку npm — менеджера пакетов в Windows 10.
  9. Активируют Visual Studio и Python. Пакеты узлов обычно зависят от пакетов с собственным кодом, поэтому необходимо установить Visual Studio.Node-gyp — это оболочка для Python GYP. Он генерирует файлы проектов для Gcc, XCode и Visual Studio.
  10. Устанавливают Python, скачав ветку для x64. Можно перейти с настройками по умолчанию, а также выбрать опцию «Добавить в путь». Это добавит двоичный файл Python в глобальный путь, что означает, что в конечном итоге придется выйти и снова войти в систему.
  11. Устанавливают Visual Studio.

Обычно проекты Node.js сильно зависят от переменных сред. В разделе сценариев package.json можно использовать локально установленные модули узлов. Рекомендуют не активировать пакеты глобально с npm –g.

Можно подвести итог: с Node создание настольных приложений с применением HTML, CSS и JavaScript выглядит многообещающе. А такие утилиты, как Spotify, Light Table и Brackets используют средства визуализации браузера с открытым исходным кодом. С помощью node-webkit и atom-shell разработчики могут легко импортировать веб-приложения на рабочий стол и применять модули Node и npm в интерфейсе с учетом location JS Windows.

Источник

  • Node js не устанавливается на windows 10
  • Node js npm not found windows
  • Node js javascript runtime что это за процесс windows
  • No volume label при установке windows
  • Node js запуск сервера windows