Node.js
Node.js is a lightweight runtime environment for executing JavaScript outside the browser, for example on the server or in the command line. WebStorm integrates with Node.js providing assistance in configuring, editing, running, debugging, testing, profiling, and maintaining your applications.
If you need Node.js only as a local runtime for your application or for managing npm packages, running JavaScript linters, build tools, test frameworks, and so on, just install Node.js. If you follow the standard installation procedure, in most cases WebStorm detects Node.js itself.
If you want to switch among several Node.js installations, they must be configured as local Node.js interpreters. In most cases, WebStorm detects Node.js installations, configures them as interpreters automatically, and adds them to the list where you can select the relevant one.
To run a Node.js application remotely, configure it as a remote interpreter. See Node.js with Docker for details.
Switching between Node.js versions
With WebStorm, you can have several installations of Node.js and switch between them while working on the same project.
On the Node.js and NPM page that opens, select the required Node.js installation from the Node Interpreter list.
Using a system Node.js version
With WebStorm, you can set the default system node alias as your project’s Node.js version. After that this version will be automatically used by all the tools that require Node.js and in all new run/debug configurations. In particular, this means that you will not have to update the settings for each tool if you install a new Node.js version and make it the default node alias in your system.
This functionality is especially helpful when you are using nvm.
Specify this new Node.js interpreter where applicable, for example in your run/debug configurations or settings of specific tools.
Configuring a local Node.js interpreter
You may need to configure Node.js installation as an interpreter manually, for example, if Node.js is installed in a non-default location so WebStorm does not detect it automatically.
In the Package manager field, choose the package manager (npm, Yarn, or pnpm) for the current project.
Using Node.js on Windows Subsystem for Linux
WebStorm lets you run and debug Node.js applications using Node.js on Windows Subsystem for Linux. You can choose Node.js on WSL as the default interpreter for the current project or you can configure and use this node version in a Node.js Run/Debug configuration.
Configure Node.js on WSL as the default project node interpreter
In the Add WSL Node Interpreter dialog that opens, select the Linux distribution you’re using and specify the path to Node.js.
Creating a Node.js application
If you have no application yet, you can generate a WebStorm project with Node.js-specific structure from a template or create an empty WebStorm project and configure Node.js in it as described in Starting with an existing Node.js application below.
Create a new Node.js application
In the left-hand pane, choose Node.js to create a basic Node.js application or Express to create an Express application.
In the right-hand pane, specify the project folder, the Node.js interpreter, and the package manager (npm or Yarn, see npm, pnpm, and Yarn for details).
If you have only one Node.js on your machine and you followed the standard installation procedure, WebStorm detects your Node.js automatically. Otherwise, choose the relevant interpreter from the list, see Configuring a local Node.js interpreter above.
Select the template language and the Style Sheet language to use.
Create an empty WebStorm project
Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The Create New Project Dialog opens.
Starting with an existing Node.js application
If you are going to continue developing an existing Node.js application, open it in WebStorm, configure Node.js in it, and download the required dependencies.
Open the application sources that are already on your machine
Click Open on the Welcome screen or select File | Open from the main menu. In the dialog that opens, select the folder where your sources are stored.
Check out the application sources from your version control
Click Get from VCS on the Welcome screen or select VCS | Get from Version Control from the main menu.
In the invoked dialog, select your version control system from the list and specify the repository to check out the application sources from.
Configure Node.js in a project
In the Node Interpreter field, specify the default Node.js interpreter for the current project. WebStorm will automatically use it every time you select the Project alias from Node Interpreter lists when creating run/debug configurations or configuring Node.js-dependent tools, for example, Prettier or ESLint.
When the configuration is completed, WebStorm displays information about the currently configured version.
If you need code completion for Node.js APIs only in some parts of your project, you can configure that using the Manage scopes link. In the Usage dialog that opens, click the relevant directories and for each of them select the configured Node.js Core library from the list. Learn more from Configuring the scope of a library.
Download the project dependencies, do one of the following:
Источник
Сборка статического сайта в WebStorm с помощью NodeJS. Часть 2
В прошлой статье мы разобрались с теоретической частью сборки фронтенда сайта, а в этой рассмотрим, как на практике, организовать взаимодействие всех этих инструментов.
Для использования SASS в системе должен быть установлен пакет sass:
Пакет я поставил глобально (-g), чтобы иметь возможность работать простым указанием имени sass. Также в настройках Argument в WebStorm File Watcher у меня прописан точный путь к папкам в которых будет происходить отслеживание sass файлов и папки в которую эти файлы будут компилироваться.
Вообще структура папок следующая:
D:.
├───.idea
├───dist здесь лежат собранные стили и страницы
│ ├───css стили
│ └───pages конкретные страницы
└───src
├───sass папки sass файлов
│ └───parts файлы sass, которые не должны компилироваться (начинаются с нижнего подчеркивания)
└───templates файлы шаблонов
├───pages страницы сайта
└───parts части страниц, который сами компилироваться не должны
Структура каталогов с папками и файлами будет выглядеть вот так:
D:.
│ package-lock.json
│
├───.idea
│
│
├───dist
│ │ index.html
│ │
│ ├───css
│ │ main.css
│ │ main.css.map
│ │
│ └───pages
│ contacts.html
│ products.html
│
└───src
├───sass
│ │ main.scss
│ │
│ └───parts
│ _card.scss
│ _grid.scss
│
└───templates
│ index.njk
│
├───pages
│ contacts.njk
│ products.njk
│
└───parts
_base.njk
_boostrap.njk
_card.njk
_footer.njk
_header.njk
_menu.njk
Как видите ничего чрезмерно сложного здесь нет, просто определенным образом организованная структура каталогов, которая, в общем говоря не является обязательной, т.е. вы сами вольны организовать ее так как вам будет удобно. Но тем не менее, определенная логика в структуре каталогов присутствовать должна.
Теперь, когда мы разобрались с файлам и каталогами, установили Sass, пора поставить шаблонизатор Nunjucks и Nunjucks-Cli. Оба этих пакета я также буду ставить глобально, также обратите внимание, что именно второй пакет даст нам возможность назначить наблюдатель изменений в WebStorm IDE, для автоматической перекомпиляциии файлов шаблонизатора *.njk в html и копирования их в каталог dist и dist/pages.
Теперь для Nunjucks нам надо настроить наблюдатель File Watcher. Идем в Tools > File Watchers. Добавляем новый элемент в список. В открывшемся окне заполняем поле File Type как Twig, чтобы наблюдатель вызывался при изменении файлов шаблона. В поле Program вводим nunjucks, в поле Arguments следующее:
Данные параметры указывают откуда брать файлы шаблонов и куда их сохранять после обработки, причем файлы шаблонов обрабатываются и во вложенных каталогах.
И запустим следующим образом:
Таким образом, из данной статьи Вы узнали как можно организовать сборку сайта из различных частей в IDE WebStorm при помощи Node.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Источник
Webstorm node js настройка
WebStorm – среда для разработки на JavaScript, которая подходит как для front-end-разработки, так и для создания приложений на Node.js.
Главное достоинство WebStorm – это удобный и умный редактор JavaSсript, HTML и CSS, который также поддерживает языки, такие как TypeScript, CoffeeScript, Dart, Less, Sass и Stylus и фреймворки, например, AngularJS, React и Meteor.
WebStorm, как и другие IDE, разработанные на основе платформы IntelliJ IDEA, делает разработку проще и удобней, обеспечивая подсветку и автодополнение кода, его анализ по ходу редактирования, быструю навигацию и рефакторинг и предоставляя разработчику мощные инструменты отладки и интеграцию с системами управления версиями. WebStorm по-настоящему понимает структуру вашего проекта и код, обнаруживает возможные проблемы еще до того, как вы открыли проект в браузере, и предлагает их решение. Встроенные в IDE инструменты для тестирования и работы с проектом помогут в разработке и сделают ее удобней и продуктивней.
Подписка WebStorm от JetBrains
Чтобы использовать данную IDE, необходимо иметь платную подписку на сайте разработчиков. Стоимость подписки 12.90 USD в месяц или 129 USD в первый год. При продлении на второй год подписка обойдется в 103 USD. При продлении на третий и далее, стоимость за год будет 77 USD.
Однако, для студентов, преподавателей, разработчиков Open Source проектов существует бесплатная лицензия (так же как и у других продуктов), для получения которой необходимо обратиться в JetBrains.
Так же для простого тестирования можно воспользоваться пробной лицензией, которая предоставляется на 30 дней.
Создание и настройка проекта
Все процессы описаны для версии WebStorm 2016.2
Для создания нового проекта в окне приветствия WebStorm необходимо выбрать пункт Create New Project.
Если нужно открыть готовый преокт, выбираем Open и указываем путь до папки проекта.
В появившемся окне указываем параметры создаваемого проекта. В поле location можно указать путь, по которому будет храниться создаваемый проект. В данном случае создается пустой проект.
В зависимости от требований к Вашему приложению можно выбрать следующие типы проектов:
HTML5 Boilerplate — это HTML/CSS/JS шаблон для всех веб-мастеров, пишущих быстрые, неглючные и ориентированные на будущее сайты.
Web Starter Kits — Набор шаблонов и редакторов позволяет вести разработку многоэкранных веб-приложений, существенно ускорив и упростив процессы.
React Starter Kit — является шаблоном для веб-разработки. Построен на Node.js, Express, GraphQL и React.
Bootstrap — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.
AngularJS — JavaScript-фреймворк с открытым исходным кодом. Предназначен для разработки одностраничных приложений. Его цель — расширение браузерных приложений на основе MVC шаблона, а также упрощение тестирования и разработки.
Node.js — программная платформа, превращающая JavaScript из узкоспециализированного языка в язык общего назначения. Node.js добавляет возможность JavaScript взаимодействовать с устройствами ввода-вывода через свой API, подключать другие внешние библиотеки, написанные на разных языках, обеспечивая вызовы к ним из JavaScript-кода. Применяется преимущественно на сервере, но есть возможность разрабатывать на Node.js и десктопные оконные приложения и даже программировать микроконтроллеры.
Yeoman — это npm-пакет с инструкциями и шаблонами для Yo, которые описывают инициализацию проекта: какие директории создать, какие файлы и куда копировать, каким образом обрабатывать шаблоны и куда их разместить после обработки.
Meteor — веб-платформа на языке JavaScript, предназначенная для разработки Web-приложений реального времени. Для связи с современными браузерами используется протокол Distributed Data Protocol (англ.)русск. (DDP), поддерживаемый с помощью WebSocket’ов, либо, если поддержки веб-сокетов и DDP нет — AJAX.
Dart — язык программирования, созданный Google. Dart позиционируется в качестве замены/альтернативы JavaScript.
Проект создан, можно начинать писать код. Для этого в проект нужно добавить файл. Для создания файла в менеджере файлов проекта нажимаем правой кнопкой мыши по названию проекта, затем в пункте New выбираем JavaScript File:
Также в проект можно добавить уже существующие файлы с кодом. Для этого можно просто перенести необходимый файл в каталог проекта. После чего, файл появится в менеджере файлов проекта:
Интерфейс и выполнение проекта
Все окно программы можно разделить на 3 области. В красной отображаются файлы проекта. В зеленой происходит непосредственная работа с файлами, в том числе – пишется код. Синяя служит для быстрого доступа к функциям: построения, запуска и отладки проекта. Дополнительно присутствует функция поиска по коду.
Приведена программа, которая увеличивает значения массива на 2.
Чтобы выполнить проект, в меню Run необходимо выбрать пункт Run или воспользоваться сочетанием клавиш Alt+Shift+F10.
После выполнения результат и сообщения о ходе выполнение программы появляются в консоли вывода.
Если код программы предусматривает пользовательский ввод, то консоль вывода может служить консолью ввода данных.
Результат выполнения программы:
Отладка проекта
Для отладки своего приложения можно пользоваться «брейкпоинтами» (преднамеренное прерывание выполнения программы). Для того чтобы поставить breakpoint нужно нажать левую кнопку мыши слева от строки кода, на которой нужно остановить программу.
После чего выбрать пункт Debug во вкладке Run. Или воспользоваться кнопкой из синей области, описанной выше.
Программа остановит свое выполнение на указаном месте, после чего на вкладке Debugger в области Variables(зеленая область на рисунке) можно отслеживать значения всех переменных.
Фиолетовая область служит для быстрого доступа к необходимым функциям при отладке(от верхней к нижней кнопки): перезапуск проекта, выполнить программу до следующей точки прерывания, пауза(не активна в данный момент), принудительное завершение программы, просмотр выставленных «брейкпоинтов», игнорировать «брейкпоинты»(программа будет выполняться до конца).
Желтая область служит для переключения между вкладками дебагера и консолью вывода, также в ней находятся кнопки для отладки: шаг с заходом, шаг с обходом, шаг с выходом.
Панель Frames (красная область) позволяет получить доступ к списку потоков вашего приложения. Для каждого потока, вы можете просматривать структуру стека, изучить кадры, перемещаться между кадрами, и автоматически переходить к исходному коду в редакторе.
Если нужно отследить значение определенной переменной, можно воспользоваться окном Watches. Чтобы добавить интересующую Вас переменную необходимо нажать на зеленый плюс и вписать название переменной из кода программы.
Аналогично можно добавить любую другую переменную. Например, чтобы добавить массив, так же нужно указать его имя, после чего во вкладке watches появится тип и значения элементов массива.
Для перехода к следующему шагу программы можно нажать кнопку Resume program или воспользоваться клавишей F9.
Таким образом, можно контролировать ход выполнения программы. Если значение переменной больше отслеживать не требуется, то можно удалить ее из списка переменных. Для удаления используется значок красного минуса.
Источник