Представлен бесплатный видеокурс по современным технологиям для веб-разработчиков ES6, ESnext,


Оглавление (нажмите, чтобы открыть):

Скринкаст по Webpack

Webpack — один из самых мощных и гибких инструментов для сборки frontend.

Вместе с тем, он достаточно сложен, а документация оставляет желать много лучшего.

Поэтому я записал этот скринкаст о том, как его использовать.

Особое внимание я постарался уделить пониманию того, как он работает, и что представляет собой сборка, поскольку без него любой нюанс влечёт долгое путешествие по форумам в поисках «рецепта». Который вполне можно сделать и самостоятельно.

Текущая версия: Webpack 3. Принципиально изменений сильных нет, но конфиги нуждаются в небольших изменениях, чтобы они работали под Webpack 3.

В первых частях скринкаста используется модуль babel-loader версии 5, который ставится через «npm i babel-loader@5» .

Текущая версия это Babel 7. Чтобы её использовать, поставьте несколько модулей:

Затем замените настройки babel-loader’а в конфиге на такие (для адаптации под браузеры с долей более 3%):

TypeScript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. In this guide we will learn how to integrate TypeScript with webpack.

Basic Setup

First install the TypeScript compiler and loader by running:

Now we’ll modify the directory structure & the configuration files:

project

tsconfig.json

Let’s set up a simple configuration to support JSX and compile TypeScript down to ES5.

See TypeScript’s documentation to learn more about tsconfig.json configuration options.

To learn more about webpack configuration, see the configuration concepts.

Now let’s configure webpack to handle TypeScript:

webpack.config.js

This will direct webpack to enter through ./index.ts , load all .ts and .tsx files through the ts-loader , and output a bundle.js file in our current directory.

Loader

We use ts-loader in this guide as it makes enabling additional webpack features, such as importing other web assets, a bit easier.

Source Maps

To learn more about source maps, see the development guide.

To enable source maps, we must configure TypeScript to output inline source maps to our compiled JavaScript files. The following line must be added to our TypeScript configuration:

tsconfig.json

Now we need to tell webpack to extract these source maps and include in our final bundle:

webpack.config.js

See the devtool documentation for more information.

Using Third Party Libraries

When installing third party libraries from npm, it is important to remember to install the typing definition for that library. These definitions can be found at TypeSearch.

For example if we want to install lodash we can run the following command to get the typings for it:

For more information see this blog post.

Importing Other Assets

To use non-code assets with TypeScript, we need to defer the type for these imports. This requires a custom.d.ts file which signifies custom definitions for TypeScript in our project. Let’s set up a declaration for .svg files:

custom.d.ts

Here we declare a new module for SVGs by specifying any import that ends in .svg and defining the module’s content as any . We could be more explicit about it being a url by defining the type as string. The same concept applies to other assets including CSS, SCSS, JSON and more.

Build Performance

This may degrade build performance.

See the Build Performance guide on build tooling.

ECMAScript 2015 (ES6) и выше

Node.js строится на современных версиях V8. Базируясь на последних выпусках этого движка, мы обеспечиваем поддержку новых функций из спецификации JavaScript ECMA-262 своевременно предоставляя их разработчикам Node.js, а также улучшая производительность и стабильность.

Весь функционал ECMAScript 2015 (ES6) разделен на три группы: поставляемый (shipping), подготовленный (staged) и в процессе (in progress):

  • Весь поставляемый функционал, который V8 считает стабильным, включен по умолчанию в Node.js и НЕ нуждается в дополнительных конфигурациях и флагах.
  • Подготовленный функционал, это список почти готовых внедрений, который еще не утвержден командой V8 как стабильный, и требует дополнительный флаг —harmony .
  • Функционал под знаком в процессе может быть активирован индивидуально, с помощью соответствующего флага гармонизации, хотя это крайне нежелательно, кроме как для целей тестирования. Примечание: эти флаги доступны в V8 и могут измениться без уведомления об их устаревании.

Какие функции поставляются с какой версией Node.js по умолчанию?

На сайте node.green представлен отличный обзор поддерживаемого функционала ECMAScript в различных версиях Node.js на основе таблицы сравнения kangax.

Какие функции в процессе?

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

Вы можете узнать функционал в процессе, доступный в каждом выпуске Node.js, используя аргумент —v8-options . Обратите внимание, что это неполные и, возможно, некорректные функции V8, поэтому используйте их на свой страх и риск:

А как насчет производительности конкретного функционала?

Команда V8 постоянно работает над улучшением производительности новых языковых функций, чтобы в конечном итоге достичь равенства со своими транспилированными или нативными аналогами в EcmaScript 5 или более ранних версиях. Текущий прогресс отслеживается на веб-сайте six-speed, который показывает производительность функций ES2015 и ESNext по сравнению с их родными аналогами ES5.

Работа по оптимизации функций, представленных в ES2015 и более поздних версиях, координируется с помощью плана производительности, где команда V8 собирает и координирует сферы, требующие улучшения, и разрабатывает документы для решения этих проблем.

Моя инфраструктура настроена с использованием флага —harmony. Должен ли я удалить его?

Текущее поведение флага —harmony на Node.js состоит в том, чтобы включать только подготовленный функционал. В конце концов, теперь это синоним —es_staging . Как упомянуто выше, это законченные функции, которые еще не считаются стабильными. Если вы беспокоитесь о безопасности использования таких функций, особенно в производственных средах, рассмотрите возможность выключения этого флага до тех пор, пока требуемые функции не перейдут в стадию «по умолчанию» на V8 и, следовательно, на Node.js. Если вы оставите его включенным, вы должны быть готовы к дальнейшим обновлениям Node.js, которые могут сломать ваш код, если V8 изменит свою семантику, чтобы более точно следовать стандарту.

Как мне узнать, какая версия V8 поставляется с определенной версией Node.js?

Node.js предоставляет простой способ перечисления всех зависимостей и соответствующих версий, которые поставляются с конкретным бинарным файлом через глобальный объект process . В случае с двигателем V8 введите следующее в своем терминале, чтобы узнать его версию:

В© Node.js Foundation. All Rights Reserved. Portions of this site originally В© Joyent.

Node.js is a trademark of Joyent, Inc. and is used with its permission. Please review the Trademark Guidelines of the Node.js Foundation.

Linux Foundation is a registered trademark of The Linux Foundation.

Linux is a registered trademark of Linus Torvalds.

Чем хорош Node.js: практика современного веб-программирования

Каждые несколько лет браузер с HTML5 изменяется — это совершенно нормально. Важно выбрать подходящие инструменты.

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

Node.js — один из таких «мастхэв»-средств разработки клиентских приложений. Это среда выполнения JavaScript-программ, построенная на JavaScript-движке Chrome V8. Среди прочего, Node.js позволяет запускать написанные на JavaScript программы из командной строки прямо на компьютере. Большинство инструментов разработчика клиентской части рассчитано на применение Node.js.

Почему возник Node.js и что это такое

Язык JavaScript создавался в середине девяностых компанией Mozilla как простой скриптовый язык программирования, встраиваемый в код HTML-страниц. Как вспоминает его автор Брэндан Эйх, разработчики ставили перед собой цель обеспечить «язык для склеивания» составляющих частей веб-ресурса: изображений, плагинов и Java-апплетов, который был бы удобен для веб-дизайнеров и программистов, не обладающих высокой квалификацией. Он создавался для программирования как на стороне клиента, так и на стороне сервера.

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

Новый инструментарий для веба

Для новой роли понадобился новый инструментарий. Постепенно JavaScript оброс целой инфраструктурой фреймворков, библиотек, компиляторов и протоколов. В том числе появилось несколько платформ исполнения серверных и клиентских приложений. Node.js — самая популярная из них. Эту платформу выпустил американский программист Райан Дал в 2009 году.

Программная платформа Node.js работает на движке V8, который транслирует JavaScript в машинный код. Грубо говоря, сам Node является приложением C++, которое получает на входе JavaScript-код и выполняет его.

В Node есть собственный интерфейс на C++ для взаимодействия с устройствами ввода-вывода на компьютере. То есть эта платформа фактически превращает JavaScript из специализированного скриптового языка в язык общего назначения. Это означает, что на Node.js вы можете писать любые компьютерные программы.

Событийно-ориентированный подход

Главная особенность Node.js — то, что вместо традиционной модели параллелизма на основе потоков автор выбрал событийно-ориентированный подход. Это такая парадигма программирования, в которой выполнение программ определяется событиями. Например, это действие пользователя, поступление сетевого пакета, сообщение из другой программы и т.д.

Такой подход сильно упрощает программирование некоторых приложений, особенно при реализации удобного интерфейса ввода-вывода (I/O), как у Node.js. По легенде, идея создания Node.js пришла автору, когда он увидел полосу загрузки файлов на Flickr, которая не понимала реального процента загрузки файлов, то есть не имела обратной связи из браузера из-за отсутствия событийной привязки.

С распространением в интернете социальных сетей и других «интерактивных» сайтов резко выросла востребованность Node.js как платформы для приложений, реагирующих на действия пользователя: чатов, игр, инструментов совместной работы — теперь всё это делают на JavaScript с помощью Node.js.

Таким образом, Node.js — это событийно-ориентированный I/O фреймворк на JavaScript. Технические особенности Node.js делают приложения на его основе легковесными и эффективными. Этим и объясняется его огромная популярность.

Разработку языка координирует Фонд Node.js, который финансируется по программе поддержки свободных проектов Linux Foundation. Это свободный распределенный проект, в создании которого на безвозмездной основе участвуют тысячи разработчиков со всего мира.

Как используется Node.js

Node.js представляет собой платформу для написания JavaScript-приложений с использованием внешних библиотек.

Благодаря Node.js написанный для браузера код JavaScript получает доступ к глобальным объектам, таким как document и window, наряду с другими API и библиотеками. С помощью Node код обращается к жесткому диску, базам данных и Сети. Это делает возможным написание абсолютно любых приложений: от утилит командной строки и видеоигр до полноценных веб-серверов.

Чаще всего Node.js используется при написании веб-приложений с интенсивным вводом-выводом. Самый распространенный пример — это веб-серверы. Node.js популярен для создания приложений реального времени: чатов, коммуникационных программ и игр. Многие приложения Node.js имеют и серверную, и клиентскую части.

Пакетный менеджер npm

Важной частью Node.js является пакетный менеджер npm — Node.js Packet Manager, который устанавливается вместе с интерпретатором Node (см. ниже).

Как установить Node.js

Последнюю версию Node.js можно скачать с официального сайта nodejs.org. Для большинства пользователей рекомендуется установка версии с долговременной поддержкой (LTS). На данный момент это 8.11.2.

Установленный Node.js предоставляет две программы командной строки: node и npm. Программа node запускает софт, созданный на JavaScript. Например, напишем простую программу на JavaScript, которая выводит в консоль текст:

console.log ( «Skillbox test»);

Сохраним ее в файл skillbox.js. Так вот, установленная программа Node может выполнить эту программу, как и любую другую программу с js-кодом:

Как видим, команда node выполнила программу skillbox.js. Как и положено, она вывела в консоль текст «Skillbox test».

Кроме node, на компьютер устанавливается программа npm — это система управления пакетами Node, необходимая для установки свободно распространяемых инструментов из Сети. Нам как раз впоследствии понадобятся некоторые из этих инструментов, которые нужно будет скачать после установки npm. Все программы здесь скачиваются и устанавливаются стандартным путем:

npm install packagename>

Доступные пакеты и их краткое описание

Например, нам понадобится программа browser-sync для запуска примеров кода в браузере и автоматического обновления страницы при сохранении изменений в коде. Инструмент устанавливается такой командой (с параметром -g, который означает «глобальную» установку пакета для выполнения из любого каталога):

npm install —g browser — sync

Node.js как конструктор приложений

Платформа Node.js содержит огромное количество полезных модулей, помогающих при работе с файлами и каталогами, взаимодействии по Сети и обработке событий. По текущей статистике, для Node.js выпущено более650 000 пакетов свободного программного обеспечения. То есть создание многих приложений похоже на сборку из кубиков конструктора.

Кроме node и npm, нужно еще установить редактор кода, если его у вас до сих пор нет. Есть несколько удобных редакторов, в том числе Visual Studio Code от Microsoft, Brackets от Adobe и популярный свободный редактор Atom. Все они бесплатные.

В дальнейших статьях мы изучим, как работать с Node.js, как настроить Node.js и какие еще инструменты понадобятся в процессе разработки клиентских приложений. Лучше всего начать обучение с вводного курса «JavaScript с нуля».

  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика

  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

«JavaScript с нуля» — практический четырехмесячный курс для тех, кто хочет научиться основам языка сценариев с индивидуальным наставником, разработать фронтенд для интерактивного веб-проекта и положить кейс к себе в портфолио. Курс идеально подойдет дизайнерам-разработчикам и начинающим программистам, кто уже знаком и умеет разрабатывать страницу на HTML и CSS, но не намерен останавливаться в изучении программирования.

Мастер Йода рекомендует:  Работа с данными в Web

Преподаватели практически «на пальцах» объяснят базовые основы синтаксиса JavaScript, научат создавать визуальные интерактивные элементы и помогут разработать первый веб-проект на JavaScript.

Node.js

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

Node.js был создан Райаном Далем (Ryan Dahl), развитием проекта сейчас занимается компания Joyent, крупный провайдер облачных вычислений в США. Серверная среда Node.js состоит из 80% кода C/C++ (ядро) и 20% JavaScript API. Также применяются основные принципы и спецификации CommonJS.

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

Node.js для фронтенд-разработчиков

Это руководство ориентировано на разработчиков, которые знают JavaScript, но еще не очень хорошо владеют Node.

Вам, вероятно, уже приходится работать с Node.js: npm scripts, конфигурацией webpack, задачами gulp, автоматической сборкой и запуском тестов. Несмотря на то, что для работы не требуется глубокое понимание всех этих действий, иногда они могут сбивать с толку.

Познакомившись с Node.js поближе, вы сможете во всем разобраться, а заодно автоматизировать некоторые вещи, которые до сих пор делаете вручную. Вы почувствуете себя увереннее и сможете писать более сложные сценарии.

Версия Node

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

У Node.js есть публичный график релизов, из которого видно, что нечетные версии не имеют долгосрочной поддержки. Текущая LTS-версия (long-term support) будет активно разрабатываться до апреля 2020 года, а затем поддерживаться до 31 декабря 2020 года.

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

Node.js широко применяется в современном фронтенде – трудно найти проект проект, который не использует инструменты этой платформы. Скорее всего, вы уже знакомы с nvm (node version manager), который позволяет установить несколько версий Node одновременно для разных проектов. Это полезно, ведь если разные приложения используют разные релизы, было бы сложно синхронизировать и тестировать их на одной машине. Такие инструменты существуют и для многих других языков, например, virtualenv для Python, rbenv для Ruby.

Babel не нужен

Так как вы можете выбирать любую LTS-версию Node.js, то ничего не мешает использовать ту, в которой поддерживаются практически все современные возможности языка (ES 2015), за исключением хвостовой рекурсии.

Следовательно, Babel вам нужен, только если вы застряли с очень старой версией, или используете JSX-синтаксис, или хотите применять суперновые возможности, которые еще не вошли в стандарт.

Также нет необходимости в использовании webpack или browserify, и поэтому у нас нет инструмента для перезагрузки кода – вы можете использовать nodemon для перезапуска приложения после внесения изменений.

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

Getting Started With RxJS — Part 1: Setting Up The Development Environment & Creating Observables

RxJS (Reactive Extensions for JavaScript) is a library for transforming, composing, and querying streams of data. It brings the concept of reactive programming to the web. The library allows you to work with asynchronous data streams with ease. Asynchronous data streams can be described in the following way:

  • Asynchronous: Callback functions are registered to be invoked when results are available. We’re able to wait for data to become available without blocking the application.
  • Data Streams: Sequences of data made available over time. You don’t need all the information to be present in order to start using them.

In this Getting Started With RxJS tutorial series you’ll be able to get started with the RxJS library, get insights and a profound understanding of the most important concepts and building blocks.

In this first part of this series we’re going to set up the development environment and get started with the concept of Observables.

Observables are just a representation of any set of values over any amount of time. This is the most basic building block of RxJS.

RxJS is part of the ReactiveX project. The project’s website can be found at http://reactivex.io/:

Let’s get started by building a sample project and learn how Observables can be used in practice.

Installing Dependencies

To get started with our demo project we first need to create a new project folder:

Next, change into that newly created folder by executing:

Now we’re using NPM (Node.js Package Manager) to create a new package.json file inside of our project folder:

If you haven’t installed Node.js (and NPM) already on your system you first need to go to https://nodejs.org/first and follow the steps which are needed to install Node.js and NPM for your specific platform.

Next we need to add and install a few dependencies by using NPM again in the following way:

$ npm install rxjs webpack webpack-dev-server typescript ts-loader

Here we’re installing Webpack, TypeScript, the corresponding TypeScript loader for Webpack, and the Webpack development web server.

Webpack is a module bundler for modern JavaScript applications. When Webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

TypeScript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, and adds optional static typing to the language.

We also need to make sure that the Webpack CLI (Command Line Interface) is being installed as a development dependencies:

$ npm install webpack-cli —save-dev

Adding Script To Package.JSON

Let’s add a script with name start to the scripts section in package.json:

This script is executing the webpack-dev-server command in development mode to start up the Webpack development web server. Later on we’re able to execute the script by using the NPM command in the following way:

Чем хорош Node.js: практика современного веб-программирования

Каждые несколько лет браузер с HTML5 изменяется — это совершенно нормально. Важно выбрать подходящие инструменты.

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

Node.js — один из таких «мастхэв»-средств разработки клиентских приложений. Это среда выполнения JavaScript-программ, построенная на JavaScript-движке Chrome V8. Среди прочего, Node.js позволяет запускать написанные на JavaScript программы из командной строки прямо на компьютере. Большинство инструментов разработчика клиентской части рассчитано на применение Node.js.

Почему возник Node.js и что это такое

Язык JavaScript создавался в середине девяностых компанией Mozilla как простой скриптовый язык программирования, встраиваемый в код HTML-страниц. Как вспоминает его автор Брэндан Эйх, разработчики ставили перед собой цель обеспечить «язык для склеивания» составляющих частей веб-ресурса: изображений, плагинов и Java-апплетов, который был бы удобен для веб-дизайнеров и программистов, не обладающих высокой квалификацией. Он создавался для программирования как на стороне клиента, так и на стороне сервера.

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

Новый инструментарий для веба

Для новой роли понадобился новый инструментарий. Постепенно JavaScript оброс целой инфраструктурой фреймворков, библиотек, компиляторов и протоколов. В том числе появилось несколько платформ исполнения серверных и клиентских приложений. Node.js — самая популярная из них. Эту платформу выпустил американский программист Райан Дал в 2009 году.

Программная платформа Node.js работает на движке V8, который транслирует JavaScript в машинный код. Грубо говоря, сам Node является приложением C++, которое получает на входе JavaScript-код и выполняет его.

В Node есть собственный интерфейс на C++ для взаимодействия с устройствами ввода-вывода на компьютере. То есть эта платформа фактически превращает JavaScript из специализированного скриптового языка в язык общего назначения. Это означает, что на Node.js вы можете писать любые компьютерные программы.

Событийно-ориентированный подход

Главная особенность Node.js — то, что вместо традиционной модели параллелизма на основе потоков автор выбрал событийно-ориентированный подход. Это такая парадигма программирования, в которой выполнение программ определяется событиями. Например, это действие пользователя, поступление сетевого пакета, сообщение из другой программы и т.д.

Такой подход сильно упрощает программирование некоторых приложений, особенно при реализации удобного интерфейса ввода-вывода (I/O), как у Node.js. По легенде, идея создания Node.js пришла автору, когда он увидел полосу загрузки файлов на Flickr, которая не понимала реального процента загрузки файлов, то есть не имела обратной связи из браузера из-за отсутствия событийной привязки.

С распространением в интернете социальных сетей и других «интерактивных» сайтов резко выросла востребованность Node.js как платформы для приложений, реагирующих на действия пользователя: чатов, игр, инструментов совместной работы — теперь всё это делают на JavaScript с помощью Node.js.

Таким образом, Node.js — это событийно-ориентированный I/O фреймворк на JavaScript. Технические особенности Node.js делают приложения на его основе легковесными и эффективными. Этим и объясняется его огромная популярность.

Разработку языка координирует Фонд Node.js, который финансируется по программе поддержки свободных проектов Linux Foundation. Это свободный распределенный проект, в создании которого на безвозмездной основе участвуют тысячи разработчиков со всего мира.

Как используется Node.js

Node.js представляет собой платформу для написания JavaScript-приложений с использованием внешних библиотек.

Благодаря Node.js написанный для браузера код JavaScript получает доступ к глобальным объектам, таким как document и window, наряду с другими API и библиотеками. С помощью Node код обращается к жесткому диску, базам данных и Сети. Это делает возможным написание абсолютно любых приложений: от утилит командной строки и видеоигр до полноценных веб-серверов.

Чаще всего Node.js используется при написании веб-приложений с интенсивным вводом-выводом. Самый распространенный пример — это веб-серверы. Node.js популярен для создания приложений реального времени: чатов, коммуникационных программ и игр. Многие приложения Node.js имеют и серверную, и клиентскую части.

Пакетный менеджер npm

Важной частью Node.js является пакетный менеджер npm — Node.js Packet Manager, который устанавливается вместе с интерпретатором Node (см. ниже).

Как установить Node.js

Последнюю версию Node.js можно скачать с официального сайта nodejs.org. Для большинства пользователей рекомендуется установка версии с долговременной поддержкой (LTS). На данный момент это 8.11.2.

Установленный Node.js предоставляет две программы командной строки: node и npm. Программа node запускает софт, созданный на JavaScript. Например, напишем простую программу на JavaScript, которая выводит в консоль текст:

console.log ( «Skillbox test»);

Сохраним ее в файл skillbox.js. Так вот, установленная программа Node может выполнить эту программу, как и любую другую программу с js-кодом:

Как видим, команда node выполнила программу skillbox.js. Как и положено, она вывела в консоль текст «Skillbox test».

Кроме node, на компьютер устанавливается программа npm — это система управления пакетами Node, необходимая для установки свободно распространяемых инструментов из Сети. Нам как раз впоследствии понадобятся некоторые из этих инструментов, которые нужно будет скачать после установки npm. Все программы здесь скачиваются и устанавливаются стандартным путем:

npm install packagename>

Доступные пакеты и их краткое описание

Например, нам понадобится программа browser-sync для запуска примеров кода в браузере и автоматического обновления страницы при сохранении изменений в коде. Инструмент устанавливается такой командой (с параметром -g, который означает «глобальную» установку пакета для выполнения из любого каталога):

npm install —g browser — sync

Node.js как конструктор приложений

Платформа Node.js содержит огромное количество полезных модулей, помогающих при работе с файлами и каталогами, взаимодействии по Сети и обработке событий. По текущей статистике, для Node.js выпущено более650 000 пакетов свободного программного обеспечения. То есть создание многих приложений похоже на сборку из кубиков конструктора.

Кроме node и npm, нужно еще установить редактор кода, если его у вас до сих пор нет. Есть несколько удобных редакторов, в том числе Visual Studio Code от Microsoft, Brackets от Adobe и популярный свободный редактор Atom. Все они бесплатные.

В дальнейших статьях мы изучим, как работать с Node.js, как настроить Node.js и какие еще инструменты понадобятся в процессе разработки клиентских приложений. Лучше всего начать обучение с вводного курса «JavaScript с нуля».

  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

«JavaScript с нуля» — практический четырехмесячный курс для тех, кто хочет научиться основам языка сценариев с индивидуальным наставником, разработать фронтенд для интерактивного веб-проекта и положить кейс к себе в портфолио. Курс идеально подойдет дизайнерам-разработчикам и начинающим программистам, кто уже знаком и умеет разрабатывать страницу на HTML и CSS, но не намерен останавливаться в изучении программирования.

Преподаватели практически «на пальцах» объяснят базовые основы синтаксиса JavaScript, научат создавать визуальные интерактивные элементы и помогут разработать первый веб-проект на JavaScript.

Node.js

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

Node.js был создан Райаном Далем (Ryan Dahl), развитием проекта сейчас занимается компания Joyent, крупный провайдер облачных вычислений в США. Серверная среда Node.js состоит из 80% кода C/C++ (ядро) и 20% JavaScript API. Также применяются основные принципы и спецификации CommonJS.

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

Учебник. Создание приложения Node.js и React в Visual Studio Tutorial: Create a Node.js and React app in Visual Studio

В Visual Studio можно легко создать проект Node.js и использовать IntelliSense и другие встроенные функции, поддерживающие Node.js. Visual Studio allows you to easily create a Node.js project and experience IntelliSense and other built-in features that support Node.js. В этом учебнике по Visual Studio вы создадите проект веб-приложения Node.js на основе шаблона Visual Studio. In this tutorial for Visual Studio, you create a Node.js web application project from a Visual Studio template. Затем вы создадите простое приложение с помощью React. Then, you create a simple app using React.

В этом руководстве вы узнаете, как: In this tutorial, you learn how to:

  • Создание проекта Node.js Create a Node.js project
  • Добавление пакетов npm Add npm packages
  • Добавление кода React в приложение Add React code to your app
  • Транскомпиляция JSX Transpile JSX

  • Подключение отладчика Attach the debugger
Мастер Йода рекомендует:  Начни свой путь в IT 13 советов от бывалых

Подготовка к работе Before you begin

Ниже приведен краткий список вопросов и ответов, с помощью которого вы сможете ознакомиться с некоторыми основными понятиями. Here’s a quick FAQ to introduce you to some key concepts.

Что такое Node.js? What is Node.js?

Node.js — это серверная среда выполнения JavaScript, выполняющая сценарии JavaScript на стороне сервера. Node.js is a server-side JavaScript runtime environment that executes JavaScript server-side.

Что такое npm? What is npm?

npm — это диспетчер пакетов по умолчанию для Node.js. npm is the default package manager for the Node.js. Диспетчер пакетов упрощает публикацию и совместное использование исходного кода библиотек Node.js. Он предназначен для упрощения установки, обновления и удаления библиотек. The package manager makes it easier for programmers to publish and share source code of Node.js libraries and is designed to simplify installation, updating, and uninstallation of libraries.

Что такое React? What is React?

React — это интерфейсная платформа для создания пользовательского интерфейса. React is a front-end framework to create a UI.

Что такое JSX? What is JSX?

JSX является расширением синтаксиса JavaScript, обычно используемым с React для описания элементов пользовательского интерфейса. JSX is a JavaScript syntax extension, typically used with React to describe UI elements. Код JSX необходимо преобразовать в обычный код JavaScript, прежде чем его можно будет запустить в браузере. JSX code must be transpiled to plain JavaScript before it can run in a browser.

Что такое webpack? What is webpack?

webpack объединяет файлы JavaScript, чтобы их можно было запустить в браузере. webpack bundles JavaScript files so they can run in a browser. Он может преобразовывать или упаковывать другие ресурсы и активы. It can also transform or package other resources and assets. Он часто используется, чтобы указать компилятору, например Babel или TypeScript, преобразовать код JSX или TypeScript в обычный код JavaScript. It is often used to specify a compiler, such as Babel or TypeScript, to transpile JSX or TypeScript code to plain JavaScript.

Предварительные требования Prerequisites

У вас должна быть установлена среда Visual Studio и должна иметься рабочая нагрузка «Разработка Node.js». You must have Visual Studio installed and the Node.js development workload.

Установите Visual Studio 2020 бесплатно со страницы скачиваемых материалов Visual Studio , если вы еще не сделали этого. If you haven’t already installed Visual Studio 2020, go to the Visual Studio downloads page to install it for free.

Установите Visual Studio 2020 бесплатно со страницы скачиваемых материалов Visual Studio , если вы еще не сделали этого. If you haven’t already installed Visual Studio 2020, go to the Visual Studio downloads page to install it for free.

Если вам нужно установить рабочую нагрузку, но вы уже используете Visual Studio, выберите пункт Средства > Получить средства и компоненты. , после чего запустится Visual Studio Installer. If you need to install the workload but already have Visual Studio, go to Tools > Get Tools and Features. , which opens the Visual Studio Installer. Выберите рабочую нагрузку Разработка Node.js, а затем элемент Изменить. Choose the Node.js development workload, then choose Modify.

У вас должна быть установлена среда выполнения Node.js. You must have the Node.js runtime installed.

Этот учебник был протестирован с версией 10.16.0. This tutorial was tested with version 10.16.0.

Если она не установлена, установите версию LTS с веб-сайта Node.js. If you don’t have it installed, install the LTS version from the Node.js website. Как правило, Visual Studio автоматически обнаруживает установленную среду выполнения Node.js. In general, Visual Studio automatically detects the installed Node.js runtime. Если установленная среда выполнения не обнаружена, вы можете настроить проект так, чтобы он ссылался на установленную среду выполнения, на странице свойств (после создания проекта щелкните его узел правой кнопкой мыши и выберите пункт Свойства). If it does not detect an installed runtime, you can configure your project to reference the installed runtime in the properties page (after you create a project, right-click the project node and choose Properties).

Создание проекта Create a project

Сначала создайте проект веб-приложения Node.js. First, create a Node.js web application project.

Запустите Visual Studio. Open Visual Studio.

Создайте новый проект. Create a new project.

Нажмите клавишу ESC, чтобы закрыть окно запуска. Press Esc to close the start window. Нажмите CTRL+Q, чтобы открыть поле поиска, введите Node.js и выберите Пустое веб-приложение Node.js (JavaScript). Type Ctrl + Q to open the search box, type Node.js, then choose Blank Node.js Web Application (JavaScript). В появившемся диалоговом окне выберите Создать. In the dialog box that appears, choose Create.

В верхней строке меню выберите Файл > Создать > Проект. From the top menu bar, choose File > New > Project. В левой области диалогового окна Новый проект разверните узел JavaScript и выберите Node.js. In the left pane of the New Project dialog box, expand JavaScript, then choose Node.js. В средней области выберите Пустое веб-приложение Node.js, введите NodejsWebAppBlank и нажмите кнопку ОК. In the middle pane, choose Blank Node.js Web Application, type the name NodejsWebAppBlank, then choose OK.

Если шаблон проекта Пустое веб-приложение Node.js отсутствует, необходимо добавить рабочую нагрузку Разработка Node.js. If you don’t see the Blank Node.js Web Application project template, you must add the Node.js development workload. Подробные инструкции см. в разделе с предварительными требованиями. For detailed instructions, see the Prerequisites.

Visual Studio создаст решение и откроет проект. Visual Studio creates the new solution and opens your project.

(1) Полужирным шрифтом выделен ваш проект, имя которого вы указали в окне Новый проект. (1) Highlighted in bold is your project, using the name you gave in the New Project dialog box. В файловой системе этот проект представлен файлом NJSPROJ в папке проекта. In the file system, this project is represented by a .njsproj file in your project folder. Вы можете задать свойства и переменные среды, связанные с проектом, щелкнув его правой кнопкой мыши и выбрав пункт Свойства. You can set properties and environment variables associated with the project by right-clicking the project and choosing Properties. Вы можете одновременно использовать и другие средства разработки, так как файл проекта не вносит изменения в источник проекта Node.js. You can do round-tripping with other development tools, because the project file does not make custom changes to the Node.js project source.

(2) На верхнем уровне находится решение, имя которого по умолчанию совпадает с именем проекта. (2) At the top level is a solution, which by default has the same name as your project. Решение, представленное на диске файлом SLN, является контейнером для одного или нескольких связанных проектов. A solution, represented by a .sln file on disk, is a container for one or more related projects.

(3) В узле npm представлены все установленные пакеты npm. (3) The npm node shows any installed npm packages. Вы можете щелкнуть узел npm правой кнопкой мыши, чтобы найти и установить пакеты npm с помощью диалогового окна. Кроме того, установить и обновить пакеты можно с помощью параметров, доступных в файле package.json и контекстном меню узла npm. You can right-click the npm node to search for and install npm packages using a dialog box or install and update packages using the settings in package.json and right-click options in the npm node.

(4) package.json — это файл, используемый npm для управления зависимостями и версиями пакетов для локально установленных пакетов. (4) package.json is a file used by npm to manage package dependencies and package versions for locally-installed packages. Дополнительные сведения для этого файла см. в разделе Конфигурация package.json For more information on this file, see package.json configuration

(5) Файлы проекта, такие как server.js, отображаются в узле проекта. (5) Project files such as server.js show up under the project node. server.js — это файл запуска проекта, поэтому он выделяется полужирным шрифтом. server.js is the project startup file and that is why it shows up in bold. Задать файл запуска можно, щелкнув правой кнопкой мыши файл в проекте и выбрав Задать как файл запуска Node.js. You can set the startup file by right-clicking a file in the project and selecting Set as Node.js startup file.

Добавление пакетов npm Add npm packages

Для правильной работы приложения требуется ряд модулей npm. This app requires a number of npm modules to run correctly.

  • react react
  • react-dom react-dom
  • express express
  • path path
  • ts-loader ts-loader
  • typescript typescript
  • webpack webpack
  • webpack-cli webpack-cli

    В обозревателе решений (правая область) щелкните правой кнопкой мыши узел npm в проекте и выберите пункт Установить новые пакеты npm. In Solution Explorer (right pane), right-click the npm node in the project and choose Install New npm Packages.

    В диалоговом окне Установка новых пакетов npm можно выбрать для установки последнюю версию пакетов или указать версию. In the Install New npm Packages dialog box, you can choose to install the most current package version or specify a version. Если вы выбрали для установки текущую версию пакетов, но в дальнейшем возникают непредвиденные ошибки, может потребоваться установить определенные версии пакетов, которые указаны далее в этой статье. If you choose to install the current version of these packages, but run into unexpected errors later, you may need to install the exact package versions described later in these steps.

    В диалоговом окне Установка новых пакетов npm выполните поиск пакета react и щелкните Установить пакет, чтобы установить его. In the Install New npm Packages dialog box, search for the react package, and select Install Package to install it.

    Выберите окно Вывод, чтобы увидеть ход установки пакета (выберите npm в поле Показать выходные данные из). Select the Output window to see progress on installing the package (select Npm in the Show output from field). После установки пакет появляется в узле npm. When installed, the package appears under the npm node.

    Файл package.json обновляется с использованием сведений о новых пакетах, включая их версию. The project’s package.json file is updated with the new package information including the package version.

    Вместо поочередного поиска и добавления остальных пакетов в пользовательском интерфейсе вставьте в файл package.json приведенный ниже код. Instead of using the UI to search for and add the rest of the packages one at a time, paste the following code into package.json. Для этого добавьте раздел dependencies в следующий код: To do this, add a dependencies section with this code:

    Если в вашей версии пустого шаблона уже существует dependencies , просто замените его приведенным выше кодом JSON. If there is already a dependencies section in your version of the blank template, just replace it with the preceding JSON code. Дополнительные сведения об использовании этого файла см. в разделе Конфигурация package.json For more information on use of this file, see package.json configuration

    Щелкните правой кнопкой мыши узел npm в проекте и выберите команду Обновить пакеты npm. Right-click npm node in your project and choose Update npm Packages.

    В области внизу выберите окно Вывод, чтобы увидеть ход установки пакетов. In the lower pane, select the Output window to see progress on installing the packages. Установка может занять несколько минут. Installation may take a few minutes and you may not see results immediately. Чтобы увидеть выходные данные, выберите Npm в поле Показать выходные данные из в окне Вывод. To see the output, make sure that you select Npm in the Show output from field in the Output window.

    Ниже показаны модули npm, отображаемые в обозревателе решений после установки. Here are the npm modules as they appear in Solution Explorer after they are installed.

    Чтобы установить пакеты npm из командной строки, щелкните узел проекта правой кнопкой мыши и выберите пункт Открыть командную строку здесь. If you prefer to install npm packages using the command line, right-click the project node and choose Open Command Prompt Here. Используйте стандартные команды Node.js для установки пакетов. Use standard Node.js commands to install packages.

    Добавление файлов проекта Add project files

    В рамках этой процедуры вы добавите в проект четыре новых файла. In these steps, you add four new files to your project.

    Для этого простого приложения новые файлы проекта добавляются в корень проекта. For this simple app, you add the new project files in the project root. (В большинстве приложений файлы, как правило, добавляются во вложенные папки, после чего ссылки в виде относительных путей изменяются соответствующим образом.) (In most apps, you typically add the files to subfolders and adjust relative path references accordingly.)

    В обозревателе решений щелкните правой кнопкой мыши проект NodejsWebAppBlank и выберите пункт Добавить > Новый элемент. In Solution Explorer, right-click the project NodejsWebAppBlank and choose Add > New Item.

    В диалоговом окне Добавление нового элемента выберите JSX-файл TypeScript, введите имя файла app.tsx и нажмите кнопку ОК. In the Add New Item dialog box, choose TypeScript JSX file, type the name app.tsx, and select OK.

    Повторите эти действия, чтобы добавить файл webpack-config.js. Repeat these steps to add webpack-config.js. Вместо файла TypeScript JSX выберите файл JavaScript. Instead of a TypeScript JSX file, choose JavaScript file.

    Выполните эти же действия, чтобы добавить файл index.html в проект. Repeat the same steps to add index.html to the project. Вместо файла JavaScript выберите HTML-файл. Instead of a JavaScript file, choose HTML file.

    Выполните эти же действия, чтобы добавить файл tsconfig.json в проект. Repeat the same steps to add tsconfig.json to the project. Вместо файла JavaScript выберите Файл конфигурации TypeScript JSON. Instead of a JavaScript file, choose TypeScript JSON Configuration file.

    Добавление кода приложения Add app code

    Откройте файл server.js и замените его содержимое следующим кодом: Open server.js and replace the existing code with the following code:

    В приведенном выше коде используется Express для запуска Node.js в качестве сервера веб-приложения. The preceding code uses Express to start Node.js as your web application server. Этот код задает в качестве номера порта номер, настроенный в свойствах проекта (по умолчанию в свойствах настроен порт 1337). This code sets the port to the port number configured in the project properties (by default, the port is configured to 1337 in the properties). Чтобы открыть свойства проекта, в обозревателе решений щелкните проект правой кнопкой мыши и выберите пункт Свойства. To open the project properties, right-click the project in Solution Explorer and choose Properties.

    Откройте файл app.tsx и добавьте следующий код: Open app.tsx and add the following code:

    В приведенном выше коде используется синтаксис JSX и React для вывода простого сообщения. The preceding code uses JSX syntax and React to display a simple message.

    Откройте файл index.html и замените раздел body на следующий код: Open index.html and replace the body section with the following code:

    Эта HTML-страница загружает файл app-bundle.js, который содержит код JSX и React, транскомпилированный в обычный код JavaScript. This HTML page loads app-bundle.js, which contains the JSX and React code transpiled to plain JavaScript. Пока файл app-bundle.js пуст. Currently, app-bundle.js is an empty file. В следующем разделе вы настроите параметры для транскомпиляции кода. In the next section, you configure options to transpile the code.

    Настройка параметров компилятора webpack и TypeScript Configure webpack and TypeScript compiler options

    В предыдущих шагах вы добавили файл webpack-config.js в проект. In the previous steps, you added webpack-config.js to the project. Далее вы добавите код конфигурации webpack. Next, you add webpack configuration code. Вы добавите простую конфигурацию webpack, в которой указываются входной файл (app.tsx) и выходной файл (app-bundle.js) для объединения и транскомпиляции кода JSX в обычный код JavaScript. You will add a simple webpack configuration that specifies an input file (app.tsx) and an output file (app-bundle.js) for bundling and transpiling JSX to plain JavaScript. Для транскомпиляции также настраиваются некоторые параметры компилятора TypeScript. For transpiling, you also configure some TypeScript compiler options. Этот код представляет собой базовую конфигурацию, которая служит для ознакомления с работой webpack и компилятора TypeScript. This code is a basic configuration that is intended as an introduction to webpack and the TypeScript compiler.

    В обозревателе решений откройте файл webpack-config.js и добавьте приведенный ниже код. In Solution Explorer, open webpack-config.js and add the following code.

    Код конфигурации webpack предписывает средству webpack использовать загрузчик TypeScript для транскомпиляции JSX. The webpack configuration code instructs webpack to use the TypeScript loader to transpile the JSX.

    Откройте файл tsconfig.json и замените код по умолчанию следующим кодом, который задает параметры компилятора TypeScript: Open tsconfig.json and replace the default code with the following code, which specifies the TypeScript compiler options:

    В качестве исходного файла указывается файл app.tsx. app.tsx is specified as the source file.

    Транскомпиляция JSX Transpile the JSX

    В обозревателе решений щелкните узел проекта правой кнопкой мыши и выберите пункт Открыть командную строку здесь. In Solution Explorer, right-click the project node and choose Open Command Prompt Here.

    В командной строке введите следующую команду: In the command prompt, type the following command:

    node_modules\.bin\webpack app.tsx —config webpack-config.js

    В окне командной строки будут выведены результаты. The command prompt window shows the result.

    Если вместо приведенных выше выходных данных будут выведены ошибки, их необходимо будет устранить, чтобы приложение работало. If you see any errors instead of the preceding output, you must resolve them before your app will work. Если ваши версии пакетов npm отличаются от используемых в этом учебнике, это может быть причиной ошибок. If your npm package versions are different than the versions shown in this tutorial, that can be a source of errors. Один из способов устранить ошибки — использовать именно те версии, которые показаны в предыдущих шагах. One way to fix errors is to use the exact versions shown in the earlier steps. Кроме того, если одна или несколько из этих версий пакетов стали нерекомендуемыми, из-за чего возникают ошибки, может потребоваться установить более поздние версии. Also, if one or more of these package versions has been deprecated and results in an error, you may need to install a more recent version to fix errors. Дополнительные сведения об использовании package.json для контроля версий пакетов npm см. в разделе Конфигурация package.json. For information on using package.json to control npm package versions, see package.json configuration.

    В обозревателе решений щелкните правой кнопкой мыши узел проекта и выберите пункты Добавить > Существующая папка, а затем папку dist и щелкните Выбрать папку. In Solution Explorer, right-click the project node and choose Add > Existing Folder, then choose the dist folder and choose Select Folder.

    Среда Visual Studio добавит в проект папку dist, которая содержит файлы app-bundle.js и app-bundle.js.map. Visual Studio adds the dist folder to the project, which contains app-bundle.js and app-bundle.js.map.

    Откройте файл app-bundle.js, чтобы просмотреть транскомпилированный код JavaScript. Open app-bundle.js to see the transpiled JavaScript code.

    Если будет предложено перезагрузить файлы, которые были изменены в других средствах, выберите вариант Да, для всех. If prompted to reload externally modified files, select Yes to All.

    Каждый раз при внесении изменений в файл app.tsx необходимо повторно выполнять команду webpack. Each time you make changes to app.tsx, you must rerun the webpack command. Чтобы автоматизировать этот шаг, добавьте скрипт сборки для транскомпиляции JSX. To automate this step, add a build script to transpile the JSX.

    Добавление скрипта сборки для транскомпиляции JSX Add a build script to transpile the JSX

    Начиная с Visual Studio 2020 требуется скрипт сборки. Starting in Visual Studio 2020, a build script is required. Вместо транскомпиляции JSX в командной строке (как показано в предыдущем разделе) можно транскомпилировать JSX при сборке из Visual Studio. Instead of transpiling JSX at the command line (as shown in the preceding section), you can transpile JSX when building from Visual Studio.

    Откройте Package.json и добавьте следующий раздел после раздела dependencies : Open package.json and add the following section after the dependencies section:

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

    Выберите Chrome в качестве целевого объекта отладки. Select Chrome as the current debug target.

    Если Chrome установлен на вашем компьютере, но отсутствует в списке, выберите Веб-браузер (название браузера) > Google Chrome в раскрывающемся списке целевых объектов отладки, а затем установите Chrome в качестве целевого браузера по умолчанию. If Chrome is available on your machine, but does not show up as an option, choose Web Browser (browsername) > Google Chrome from the debug target dropdown list, and select Chrome as the default browser target.

    Чтобы запустить приложение, нажмите клавишу F5 (Отладка > Начать отладку) или кнопку с зеленой стрелкой. To run the app, press F5 (Debug > Start Debugging) or the green arrow button.

    Откроется окно консоли Node.js, в котором показан порт, через который отладчик ожидает передачи данных. A Node.js console window opens that shows the port on which the debugger is listening.

    Visual Studio запускает приложение с помощью файла запуска server.js. Visual Studio starts the app by launching the startup file, server.js.

    Закройте окно браузера. Close the browser window.

    Закройте окно консоли. Close the console window.

    Установите точку останова и запустите приложение. Set a breakpoint and run the app

    В файле server.js щелкните в поле слева от объявления staticPath , чтобы установить точку останова: In server.js, click in the gutter to the left of the staticPath declaration to set a breakpoint:

    Точки останова — это один из самых простых и важных компонентов надежной отладки. Breakpoints are the most basic and essential feature of reliable debugging. Точка останова указывает, где Visual Studio следует приостановить выполнение кода, чтобы вы могли проверить значения переменных или поведение памяти либо выполнение ветви кода. A breakpoint indicates where Visual Studio should suspend your running code so you can take a look at the values of variables, or the behavior of memory, or whether or not a branch of code is getting run.

    Чтобы запустить приложение, нажмите клавишу F5 (Отладка > Начать отладку). To run the app, press F5 (Debug > Start Debugging).

    Выполнение отладчика прервется в установленной точке останова (текущий оператор выделяется желтым цветом). The debugger pauses at the breakpoint you set (the current statement is marked in yellow). Теперь вы можете изучить состояние приложения, наводя указатель мыши на переменные в текущей области и используя окна отладчика, такие как Локальные и Контрольные значения. Now, you can inspect your app state by hovering over variables that are currently in scope, using debugger windows like the Locals and Watch windows.

    Чтобы продолжить выполнение приложения, нажмите клавишу F5. Press F5 to continue the app.

    Если вы хотите использовать инструменты разработчика Chrome, нажмите клавишу F12. If you want to use the Chrome Developer Tools, press F12. С их помощью можно изучить модель DOM и взаимодействовать с приложением с помощью консоли JavaScript. You can use these tools to examine the DOM and interact with the app using the JavaScript Console.

    Закройте веб-браузер и консоль. Close the web browser and the console.

    Установка и срабатывание точки останова в коде React на стороне клиента Set and hit a breakpoint in the client-side React code

    В предыдущем разделе вы подключили отладчик к коду Node.js на стороне сервера. In the preceding section, you attached the debugger to server-side Node.js code. Чтобы можно было подключить отладчик из Visual Studio и попадать в точки останова в коде React на стороне клиента, необходимо правильно настроить процесс. To attach the debugger from Visual Studio and hit breakpoints in client-side React code, the debugger needs help to identify the correct process. Ниже описывается один из способов. Here is one way to enable this.

    Закройте все окна Chrome. Close all Chrome windows.

    Щелкните правой кнопкой мыши кнопку Пуск Windows, выберите команду Выполнить и введите следующую команду: Open the Run command from the Windows Start button (right-click and choose Run), and enter the following command:

    Chrome будет запущен в режиме отладки. This starts Chrome with debugging enabled.

    Можно также задать флаг —remote-debugging-port при запуске браузера, выбрав Просмотреть с помощью. > из панели инструментов Отладка, затем выбрав Добавить, а затем установив соответствующий флаг в поле Аргументы. You can also set the —remote-debugging-port flag at browser launch by selecting Browse With. > from the Debug toolbar, then choosing Add, and then setting the flag in the Arguments field. Используйте другое понятное для браузера имя, например Chrome с отладкой. Use a different friendly name for the browser such as Chrome with Debugging. Подробности см. в заметках о выпуске. For details, see the Release Notes.

    Перейдите в Visual Studio и установите точку останова в коде файла app-bundle.js в функции render() , как показано на рисунке ниже. Switch to Visual Studio and set a breakpoint in app-bundle.js code in the render() function as shown in the following illustration:

    Чтобы найти функцию render() в app-bundle.js, используйте комбинацию клавиш CTRL+F (Правка > Найти и заменить > Быстрый поиск). To find the render() function in app-bundle.js, use Ctrl+F (Edit > Find and Replace > Quick Find).

    Выбрав Chrome в качестве целевого объекта отладки в Visual Studio, нажмите клавиши CTRL+F5 (Отладка > Запуск без отладки), чтобы запустить приложение в браузере. With Chrome selected as the debug target in Visual Studio, press Ctrl+F5 (Debug > Start Without Debugging) to run the app in the browser.

    Приложение откроется в новой вкладке браузера. The app opens in a new browser tab.

    Выберите Отладка > Присоединение к процессу. Choose Debug > Attach to Process.

    В диалоговом окне Присоединение к процессу выберите в поле Присоединить к элемент Код Webkit и введите chrome в поле фильтра, чтобы отфильтровать результаты поиска. In the Attach to Process dialog box, choose Webkit code in the Attach to field, type chrome in the filter box to filter the search results.

    Выберите процесс Chrome с соответствующим портом узла (1337 в этом примере) и нажмите кнопку Присоединить. Select the Chrome process with the correct host port (1337 in this example), and select Attach.

    Определить, что отладчик присоединился правильно, можно по открытию проводника DOM и консоли JavaScript в Visual Studio. You know the debugger has attached correctly when the DOM Explorer and the JavaScript Console open in Visual Studio. Эти средства отладки аналогичны инструментам Chrome для разработчиков и средствам F12 для Microsoft Edge. These debugging tools are similar to Chrome Developer Tools and F12 Tools for Microsoft Edge.

    Если отладчик не присоединяется и появляется сообщение «Не удалось присоединиться к процессу. If the debugger does not attach and you see the message «Unable to attach to the process. Операция недопустима в текущем состоянии», — перед запуском Chrome в режиме отладки закройте все экземпляры Chrome через диспетчер задач. An operation is not legal in the current state.», use the Task Manager to close all instances of Chrome before starting Chrome in debugging mode. Возможно, выполняются расширения Chrome и препятствуют переходу в режим полной отладки. Chrome Extensions may be running and preventing full debug mode.

    Так как код с точкой останова уже был выполнен, обновите страницу браузера, чтобы точка останова была достигнута еще раз. Because the code with the breakpoint already executed, refresh your browser page to hit the breakpoint.

    Когда отладчик приостановит выполнение, вы можете изучить состояние приложения, наводя указатель мыши на переменные и используя окна отладчика. While paused in the debugger, you can examine your app state by hovering over variables and using debugger windows. Вы также можете выполнять пошаговую отладку кода (клавиши F5, F10 и F11). You can advance the debugger by stepping through code (F5, F10, and F11).

    Точка останова может быть достигнута в файле app-bundle.js или сопоставленном с ним месте в файле app.tsx в зависимости от среды и состояния браузера. You may hit the breakpoint in either app-bundle.js or its mapped location in app.tsx, depending on your environment and browser state. В любом случае вы можете выполнять пошаговую отладку кода и просматривать переменные. Either way, you can step through code and examine variables.

    Если требуется приостановка выполнения кода в app.tsx, но вам не удается это сделать, используйте присоединение к процессу, чтобы подключить отладчик, как это описано в предыдущих этапах. If you need to break into code in app.tsx and are unable to do it, use Attach to Process as described in the previous steps to attach the debugger. Затем откройте динамически созданный файл app.tsx в обозревателе решений. Для этого откройте Документы скриптов > app.tsx, установите точку останова и обновите страницу в браузере (установите точку останова в строке кода, допускающей точки останова, например в операторе return или объявлении var ). Then open the dynamically generated app.tsx file from Solution Explorer by opening Script Documents > app.tsx, set a breakpoint, and refresh the page in your browser (set the breakpoint in a line of code that allows breakpoints, such as the return statement or a var declaration).

    Либо, если необходимо прервать выполнение кода в файле app.tsx, но сделать это не удается, попробуйте использовать оператор debugger; в app.tsx или установите точки останова в инструментах разработчика Chrome. Alternatively, if you need to break into code in app.tsx and are unable to do it, try using the debugger; statement in app.tsx, or set breakpoints in the Chrome Developer Tools instead.

    Если требуется приостановка выполнения кода в файле app-bundle.js, но это сделать не удается, удалите файл соответствия источника app-bundle.js.map. If you need to break into code in app-bundle.js and are unable to do it, remove the sourcemap file, app-bundle.js.map.

    После того как вы впервые присоединитесь к процессу с помощью этих инструкций, в дальнейшем можно присоединяться к нему в Visual Studio 2020 с помощью команды Отладка > Повторно подключиться к процессу. Once you attach to the process the first time by following these steps, you can quickly reattach to the same process in Visual Studio 2020 by choosing Debug > Reattach to Process.

    Мастер Йода рекомендует:  Обзор элементов HTML5 “Menu” и “Menuitem”
Добавить комментарий