Меню Рубрики

Установка javascript в visual studio

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

В этом учебнике по разработке с помощью Node.js и Express в Visual Studio вы создадите простое веб-приложение Node.js, добавите в него код, изучите некоторые возможности интегрированной среды разработки и запустите приложение. In this tutorial for Visual Studio development using Node.js and Express, you create a simple Node.js web application, add some code, explore some features of the IDE, and run the app.

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

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

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

  • Создание проекта Node.js Create a Node.js project
  • Добавление кода Add some code
  • Использование IntelliSense для редактирования кода Use IntelliSense to edit code
  • Запуск приложения Run the app
  • Достижение точки останова в отладчике Hit a breakpoint in the debugger

Подготовка к работе 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.

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

Express — это платформа веб-приложений, используемая в качестве серверной платформы Node.js для сборки веб-приложений. Express is a web application framework, used as a server framework for Node.js to build web applications. Express позволяет использовать различные внешние платформы для создания пользовательского интерфейса, такие как Pug (прежнее название Jade). Express allows you to use choose different front-end frameworks to create a UI, such as Pug (formerly called Jade). В этом учебнике используется Pug. Pug is used in this tutorial.

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

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

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

Установите Visual Studio 2017 бесплатно со страницы скачиваемых материалов Visual Studio , если вы еще не сделали этого. If you haven’t already installed Visual Studio 2017, 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.

Если он не установлен, мы рекомендуем установить версию LTS с веб-сайта Node.js для обеспечения лучшей совместимости с внешними платформами и библиотеками. If you don’t have it installed, we recommend you install the LTS version from the Node.js website for best compatibility with outside frameworks and libraries. Node.js построен для 32-разрядных и 64-разрядных архитектур. Node.js is built for 32-bit and 64-bit architectures. Средства Node.js в Visual Studio, включенные в рабочую нагрузку Node.js, поддерживают обе версии. The Node.js tools in Visual Studio, included in the Node.js workload, support both versions. Однако требуется только одна, поскольку программа установки Node.js поддерживает только одну установку за раз. Only one is required and the Node.js installer only supports one being installed at a time.

Как правило, Visual Studio автоматически обнаруживает установленную среду выполнения Node.js. In general, Visual Studio automatically detects the installed Node.js runtime. Если установленная среда выполнения не обнаружена, вы можете настроить проект так, чтобы он ссылался на установленную среду выполнения, на странице свойств (после создания проекта щелкните его узел правой кнопкой мыши, выберите пункт Свойства и укажите путь Node.exe). 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, choose Properties, and set the Node.exe path). Можно использовать глобальную установку Node.js или указать путь к локальному интерпретатору в каждом из проектов Node.js. You can use a global installation of Node.js or you can specify the path to a local interpreter in each of your Node.js projects.

Читайте также:  Установка каркаса распашных ворот

Этот учебник был протестирован с Node.js 8.10.0. This tutorial was tested with Node.js 8.10.0.

Создание проекта Node.js Create a new Node.js project

Visual Studio управляет файлами для отдельного приложения в проекте. Visual Studio manages files for a single application in a project. Проект включает исходный код, ресурсы и файлы конфигурации. The project includes source code, resources, and configuration files.

В этом учебнике вы начнете работу с простого проекта, содержащего код для приложения Node.js и express. In this tutorial, you begin with a simple project containing code for a Node.js and express app.

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

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

Нажмите клавишу ESC, чтобы закрыть окно запуска. Press Esc to close the start window. Нажмите CTRL+Q, чтобы открыть поле поиска, введите Node.js и выберите Create a new Basic Azure Node.js Express 4 application (Создать простое приложение Node.js Express 4 в Azure) (JavaScript). Type Ctrl + Q to open the search box, type Node.js, then choose Create a new Basic Azure Node.js Express 4 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. В средней области выберите Базовое приложение Azure Node.js Express 4 и нажмите кнопку ОК. In the middle pane, choose Basic Azure Node.js Express 4 application, then choose OK.

Если шаблон проекта Базовое приложение Azure Node.js Express 4 отсутствует, необходимо добавить рабочую нагрузку Разработка Node.js. If you don’t see the Basic Azure Node.js Express 4 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 in the right pane. Файл app.js проекта откроется в редакторе (в левой области). The app.js project file opens in the editor (left pane).

(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) Файлы проекта, такие как app.js, отображаются в узле проекта. (5) Project files such as app.js show up under the project node. app.js — это файл запуска проекта, поэтому он выделяется полужирным шрифтом. app.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 и проверьте наличие необходимых пакетов npm. Open the npm node and make sure that all the required npm packages are present.

Если каких-либо пакетов не хватает (имеется значок с восклицательным знаком), можно щелкнуть правой кнопкой мыши узел npm и выбрать пункт Установить недостающие пакеты npm. If any packages are missing (exclamation point icon), you can right-click the npm node and choose Install Missing npm Packages.

Добавление кода Add some code

Приложение использует Pug в качестве внешней платформы JavaScript. The application uses Pug for the front-end JavaScript framework. Pug использует простой код разметки, который компилируется в HTML. Pug uses simple markup code that compiles to HTML. (Среда Pug задана в качестве обработчика представлений в файле app.js. (Pug is set as the view engine in app.js. Код, который задает обработчик представлений в app.js, — app.set(‘view engine’, ‘pug’); .) The code that sets the view engine in app.js is app.set(‘view engine’, ‘pug’); .)

В обозревателе решений (правая область) откройте папку представлений, а затем откройте файл index.pug. In Solution Explorer (right pane), open the views folder, then open index.pug.

Замените содержимое следующей разметкой: Replace the content with the following markup.

Предыдущий код используется для динамического создания HTML-страницы с заголовком и приветственным сообщением. The preceding code is used to dynamically generate an HTML page with a title and welcome message. Страница также содержит код, позволяющий отображать изображение, которое изменяется при каждом нажатии кнопки. The page also includes code to display an image that changes whenever you press a button.

В папке маршрутов откройте файл index.js. In the routes folder, open index.js.

Добавьте следующий код перед вызовом router.get : Add the following code before the call to router.get :

Этот код создает объект данных, который передается на динамически созданную HTML-страницу. This code creates a data object that you pass to the dynamically generated HTML page.

Замените вызов функции router.get следующим кодом: Replace the router.get function call with the following code:

Предыдущий код задает текущую страницу с помощью объекта маршрутизатора Express и отображает ее, передавая объект заголовка и данных. The preceding code sets the current page using the Express router object and renders the page, passing the title and data object to the page. Файл index.pug указан здесь в качестве страницы для загрузки при запуске index.js. The index.pug file is specified here as the page to load when index.js runs. index.js настраивается в качестве маршрута по умолчанию в коде app.js (не показано). index.js is configured as the default route in app.js code (not shown).

Чтобы продемонстрировать несколько возможностей Visual Studio, мы намеренно добавили ошибку в строку кода, содержащего функцию res.render . To demonstrate several features of Visual Studio, there’s a deliberate error in the line of code containing res.render . Необходимо исправить эту ошибку, прежде чем запустить приложение в следующем разделе. You need to fix the error before the app can run, which you do in the next section.

Использование IntelliSense Use IntelliSense

IntelliSense — это средство Visual Studio, которое помогает при написании кода. IntelliSense is a Visual Studio tool that assists you as you write code.

В файле index.js перейдите к строке кода, содержащей res.render . In index.js, go to the line of code containing res.render .

Установите курсор в конце строки data , введите : get , и IntelliSense покажет функцию getData , определенную ранее в этом коде. Put your cursor after the data string, type : get and IntelliSense will show you the getData function defined earlier in the code. Выберите getData . Select getData .

Добавьте круглые скобки, чтобы сформировать вызов функции ( getData() ). Add the parentheses to make it a function call, getData() .

Удалите запятую ( , ) перед элементом «data» , и выражение будет выделено зеленым цветом (подсветка синтаксиса). Remove the comma ( , ) before «data» and you see green syntax highlighting on the expression. Наведите указатель на подсветку синтаксиса. Hover over the syntax highlighting.

В последней строке этого сообщения указывается, что интерпретатор JavaScript ожидал запятую ( , ). The last line of this message tells you that the JavaScript interpreter expected a comma ( , ).

Читайте также:  Установки для очистки циркуляционной воды

В нижней области щелкните вкладку Список ошибок. In the lower pane, click the Error List tab.

Вы увидите предупреждение и описание, а также имя файла и номер строки. You see the warning and description along with the filename and line number.

Исправьте код, добавив запятую ( , ) перед элементом «data» . Fix the code by adding the comma ( , ) before «data» .

Исправленная строка кода должна выглядеть следующим образом: res.render(‘index’, < title: 'Express', "data": getData() >); When corrected, line of code should look like this: res.render(‘index’, < title: 'Express', "data": getData() >);

Установка точки останова Set a breakpoint

Затем вы запустите приложение с подключенным отладчиком Visual Studio. You’re next going to run the app with the Visual Studio debugger attached. Но сначала задайте точку останова. Before doing that, you need to set a breakpoint.

В файле index.js щелкните в левом внешнем поле перед следующей строкой кода, чтобы установить точку останова: In index.js, click in the left gutter before the following line of code 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.

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

На панели инструментов отладки выберите целевой объект отладки, например Microsoft Edge или Chrome. Select the debug target in the Debug toolbar, such as Microsoft Edge or Chrome.

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

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

Отладчик приостановит выполнение в заданной точке останова. The debugger pauses at the breakpoint you set. Теперь можно изучить состояние приложения. Now, you can inspect your app state.

Наведите указатель на функцию getData , чтобы увидеть ее свойства в подсказке по данным. Hover over getData to see its properties in a DataTip

Чтобы продолжить, нажмите клавишу F5 (Отладка > Продолжить). Press F5 (Debug > Continue) to continue.

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

В окне браузера вы увидите заголовок «Express» и фразу «Welcome to Express» в первом абзаце. In the browser window, you will see «Express» as the title and «Welcome to Express» in the first paragraph.

Нажимайте кнопки, чтобы просмотреть различные изображения. Click the buttons to display different images.

Закройте веб-браузер. Close the web browser.

(Необязательно) Публикация в Службу приложений Azure (Optional) Publish to Azure App Service

В обозревателе решений щелкните проект правой кнопкой мыши и выберите пункт Опубликовать. In Solution Explorer, right-click the project and choose Publish.

Выберите цель Служба приложений Microsoft Azure. Choose Microsoft Azure App Service.

В диалоговом окне Служба приложений можно войти в учетную запись Azure и подключиться к существующим подпискам Azure. In the App Service dialog box, you can sign into your Azure account and connect to existing Azure subscriptions.

Выполните дальнейшие инструкции, чтобы выбрать подписку, выбрать или создать группу ресурсов, выбрать или создать план службы приложений, а затем, когда будет предложено, выполните инструкции по публикации в Azure. Follow the remaining steps to select a subscription, choose or create a resource group, choose or create an app service plane, and then follow the steps when prompted to publish to Azure. Более подробные инструкции см. на странице Публикация на веб-сайте Azure с помощью веб-развертывания. For more detailed instructions, see Publish to Azure website using web deploy.

В окне Вывод показан ход выполнения развертывания в Azure. The Output window shows progress on deploying to Azure.

После успешного развертывания в браузере откроется приложение, выполняющееся в Службе приложений Azure. On successful deployment, your app opens in a browser running in Azure App Service. Нажмите кнопку, чтобы отобразить изображение. Click a button to display an image.

Поздравляем с завершением этого учебника! Congratulations on completing this tutorial!

источник

Добавить комментарий