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

29 октября 2020

Устанавливаем программную платформу Node.js, для того чтобы дать JavaScript возможность взаимодействовать с устройствами ввода-вывода через свой API и подключать разные внешние библиотеки.

Установка Node.js на Windows

Для начала необходимо установить правильную консоль для WIndows.

После этого можно переходить к установке Node.js. Для Windows есть только один способ.

Необходимо перейти на официальный сайт https://nodejs.org и на главной странице скачать последнюю стабильную версию.

Официальный сайт https://nodejs.org.

После загрузки инсталлятор следует запустить и установить Node.js, как любую другую программу.

Убедимся, что всё установилось. Для этого в cmder проверим версию Node.js с помощью команды node -v и npm -v .

Проверка версии и установка пакета.

Установка Node.js на OS X

Заходим на сайт https://nodejs.org и на главной странице скачиваем последнюю стабильную версию, нажав на соответствующую кнопку.

Официальный сайт https://nodejs.org.

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

Начало работы с веб-платформами Node.js в Windows Get started with Node.js web frameworks on Windows

Пошаговое руководство, помогающее приступить к работе с веб-платформами Node.js в Windows, включая Next.js, Nuxt.js и Gatsby. A step-by-step guide to help you get started using Node.js web frameworks on Windows, including Next.js, Nuxt.js, and Gatsby.

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

В этом руководстве предполагается, что вы уже настроили в среде разработки Node.js подсистему Windows для Linux версии 2 (WSL 2), в том числе: This guide assumes that you’ve already completed the steps to set up your Node.js development environment with WSL 2, including:

• установили Windows 10 Insider Preview (сборки 18932) или более поздней версии; Install Windows 10 Insider Preview build 18932 or later.
• включили компонент WSL 2 в Windows; Enable the WSL 2 feature on Windows.
• установили дистрибутив Linux (Ubuntu 18.04 для наших примеров), Install a Linux distribution (Ubuntu 18.04 for our examples). что можно проверить с помощью команды wsl lsb_release -a ; You can check this with: wsl lsb_release -a
• убедились, что дистрибутив Ubuntu 18.04 работает в режиме WSL 2 Ensure your Ubuntu 18.04 distribution is running in WSL 2 mode. (WSL может запускать дистрибутивы в режиме версии 1 или 2), что можно проверить, открыв PowerShell и выполнив команду wsl -l -v ; (WSL can run distributions in both v1 or v2 mode.) You can check this by opening PowerShell and entering: wsl -l -v
• с помощью PowerShell установили Ubuntu 18.04 в качестве дистрибутива по умолчанию с помощью команды wsl -s ubuntu 18.04 . Using PowerShell, set Ubuntu 18.04 as your default distribution, with: wsl -s ubuntu 18.04

Приступая к работе с Next.js Get started with Next.js

Next.js — это платформа для создания визуализируемых сервером приложений JavaScript на основе React.js, Node.js, Webpack и Babel.js. Next.js is a framework for creating server-rendered JavaScript apps based on React.js, Node.js, Webpack and Babel.js. По сути, это шаблон проекта для React, в котором особое внимание уделяется рекомендациям, позволяющим создавать «универсальные» веб-приложения простым и согласованным способом практически без настройки. It is basically a project boilerplate for React, crafted with attention to best practices, that allows you to create «universal» web apps in a simple, consistent way, with hardly any configuration. Эти «универсальные» визуализируемые сервером веб-приложения иногда называют изоморфными. Это означает, что для клиента и сервера используется общий код. These «universal» server-rendered web apps are also sometimes called “isomorphic”, meaning that code is shared between the client and server.

Чтобы создать Next.js, включая установку next, react, and react-dom, сделайте следующее: To create a Next.js project, which includes installing next, react, and react-dom:

Откройте терминал WSL (например, Ubuntu 18.04). Open your WSL terminal (ie. Ubuntu 18.04).

Создайте новую папку проекта mkdir NextProjects и войдите в этот каталог: cd NextProjects . Create a new project folder: mkdir NextProjects and enter that directory: cd NextProjects .

Установите Next.js и создайте проект (заменив my-next-app любым другим именем приложения): npm create next-app my-next-app . Install Next.js and create a project (replacing ‘my-next-app’ with whatever you’d like to call your app): npm create next-app my-next-app .

После установки пакета замените каталоги на папку нового приложения cd my-next-app , а затем используйте code . , чтобы открыть проект Next.js в VS Code. Once the package has been installed, change directories into your new app folder, cd my-next-app , then use code . to open your Next.js project in VS Code. Это позволит просмотреть инфраструктуру Next.js, созданную для приложения. This will allow you to look at the Next.js framework that has been created for your app. Обратите внимание на то, что экземпляр VS Code открыла приложение в среде WSL-Remote (как указано на зеленой вкладке в левом нижнем углу окна VS Code). Notice that VS Code opened your app in a WSL-Remote environment (as indicated in the green tab on the bottom-left of your VS Code window). Это означает, что хотя вы используете VS Code для редактирования в ОС Windows, приложение по-прежнему работает в ОС Linux. This means that while you are using VS Code for editing on the Windows OS, it is still running your app on the Linux OS.

После установки Next.js следует запомнить 3 команды: There are 3 commands you need to know once Next.js is installed:

• npm run dev для запуска экземпляра разработки с горячей перегрузкой, просмотра файлов и повторного выполнения задач; npm run dev for running a development instance with hot-reloading, file watching and task re-running.
• npm run build для компиляции проекта; npm run build for compiling your project.
• npm start для запуска приложения в режиме рабочей среды. npm start for starting your app in production mode.

Откройте терминал WSL, интегрированный в VS Code (Вид > Терминал). Open the WSL terminal integrated in VS Code (View > Terminal). Убедитесь, что путь терминала указывает на каталог проекта (т. е.

/NextProjects/my-next-app$ ). Make sure that the terminal path is pointed to your project directory (ie.

/NextProjects/my-next-app$ ). Затем попробуйте запустить экземпляр разработки нового приложения Next.js с помощью npm run dev Then try running a development instance of your new Next.js app using: npm run dev

Локальный сервер разработки будет запущен, и после того как создание страниц проекта будет завершено, терминал отобразит сообщение «compiled successfully — ready on http://localhost:3000» (Компиляция выполнена, приложение доступно по адресу http://localhost:3000). The local development server will start and once your project pages are done building, your terminal will display «compiled successfully — ready on http://localhost:3000». Выберите эту ссылку на localhost, чтобы открыть новое приложение Next.js в веб-браузере. Select this localhost link to open your new Next.js app in a web browser.

Откройте файл pages/index.js в редакторе VS Code. Open the pages/index.js file in your VS Code editor. Найдите заголовок страницы

Welcome to Next.js!

This is my new Next.js app!

Welcome to Next.js!

This is my new Next.js app!

Давайте посмотрим, как Next.js обрабатывает ошибки. Let’s see how Next.js handles errors. Удалите закрывающий тег

This is my new Next.js app! . Remove the

This is my new Next.js app! . Сохраните это изменение и обратите внимание на то, что в браузере и терминале появилось сообщение об ошибке компиляции, в котором сказано, что ожидается закрывающий тег для

. Save this change and notice that a «Failed to compile» error will display in your browser, and in your terminal, letting your know that a closing tag for

is expected. Замените закрывающий тег

Вы можете использовать отладчик VS Code в приложении Next.js, нажав клавишу F5 или выбрав в строке меню Вид > Отладка (Ctrl+Shift+D) либо Вид > Консоль отладки (Ctrl+Shift+Y). You can use VS Code’s debugger with your Next.js app by selecting the F5 key, or by going to View > Debug (Ctrl+Shift+D) and View > Debug Console (Ctrl+Shift+Y) in the menu bar. Если выбрать значок шестеренки в окне «Отладка», будет создан файл конфигурации запуска ( launch.json ), в котором будут сохранены сведения о конфигурации отладки. If you select the gear icon in the Debug window, a launch configuration ( launch.json ) file will be created for you to save debugging setup details. Дополнительные сведения см. в разделе об отладке в VS Code. To learn more, see VS Code Debugging.

Дополнительные сведения о Next.js доступны в документации по Next.js. To learn more about Next.js, see the Next.js docs.

Приступая к работе с Nuxt.js Get started with Nuxt.js

Nuxt.js — это платформа для создания визуализируемых сервером приложений JavaScript на основе Vue.js, Node.js, Webpack и Babel.js. Nuxt.js is a framework for creating server-rendered JavaScript apps based on Vue.js, Node.js, Webpack and Babel.js. Она была создана на основе Next.js. It was inspired by Next.js. По сути, это шаблон проекта для Vue. It is basically a project boilerplate for Vue. Как и в Next.js, в Nuxt.js особое внимание уделяется рекомендациям, и эта платформа позволяет создавать «универсальные» веб-приложения простым и согласованным способом практически без настройки. Just like Next.js, it is crafted with attention to best practices and allows you to create «universal» web apps in a simple, consistent way, with hardly any configuration. Эти «универсальные» визуализируемые сервером веб-приложения иногда называют изоморфными. Это означает, что для клиента и сервера используется общий код. These «universal» server-rendered web apps are also sometimes called “isomorphic”, meaning that code is shared between the client and server.

Чтобы создать проект Nuxt.js, потребуется ответить на ряд вопросов о том, какую интегрированную серверную платформу, инфраструктуру пользовательского интерфейса, платформу тестирования, режим, модули и анализатор кода вы хотите установить. To create a Nuxt.js project, which will include answering a series of questions about what sort of integrated server-side framework, UI framework, testing framework, mode, modules, and linter you would like to install:

Откройте терминал WSL (например, Ubuntu 18.04). Open your WSL terminal (ie. Ubuntu 18.04).

Создайте новую папку проекта mkdir NuxtProjects и войдите в этот каталог: cd NuxtProjects . Create a new project folder: mkdir NuxtProjects and enter that directory: cd NuxtProjects .

Установите Nuxt.js и создайте проект (заменив my-nuxt-app любым другим именем приложения): npm create nuxt-app my-nuxt-app . Install Nuxt.js and create a project (replacing ‘my-nuxt-app’ with whatever you’d like to call your app): npm create nuxt-app my-nuxt-app

Установщик Nuxt.js задаст следующие вопросы: The Nuxt.js installer will now ask you the following questions:

• Имя проекта: my-nuxtjs-app Project Name: my-nuxtjs-app
• Project description (Описание проекта): описание приложения Nuxt.js. Project description: Description of my Nuxt.js app.
• Author name (Имя автора): я использую свой псевдоним для GitHub. Author name: I use my GitHub alias.
• Choose the package manager (Выберите диспетчер пакетов): Yarn или Npm. Мы используем NPM для наших примеров. Choose the package manager: Yarn or Npm — we use NPM for our examples.
• Choose UI framework (Выберите инфраструктуру пользовательского интерфейса): None (нет), Ant Design Vue, Bootstrap Vue и т. д. Choose UI framework: None, Ant Design Vue, Bootstrap Vue, etc. Давайте в этом примере выберем Vuetify, однако сообщество Vue создало удобную сводку со сравнением этих инфраструктур пользовательского интерфейса, чтобы помочь вам сделать оптимальный выбор для проекта. Let’s choose Vuetify for this example, but the Vue Community created a nice summary comparing these UI frameworks to help you choose the best fit for your project.
• Choose custom server frameworks (Выберите пользовательские инфраструктуры серверов): None (нет), AdonisJs, Express, Fastify и т. д. Choose custom server frameworks: None, AdonisJs, Express, Fastify, etc. В этом примере мы выберем Нет, но на сайте Dev.to можно найти сравнение серверных платформ за 2019–2020 г.г. Let’s choose None for this example, but you can find a 2019-2020 server framework comparison on the Dev.to site.
• Choose Nuxt.js modules (Выберите модули Nuxt.js, используйте пробел для выбора модулей или просто нажмите клавишу «ВВОД», если модули вам не нужны): Axios (чтобы упростить обработку HTTP-запросов) или PWA support (поддержка PWA для добавления рабочей роли службы, файла manifest.json и т. д.). Choose Nuxt.js modules (use spacebar to select modules or just enter if you don’t want any): Axios (for simplifying HTTP requests) or PWA support (for adding a service-worker, manifest.json file, etc). Давайте не будем добавлять модуль в наш пример. Let’s not add a module for this example.
• Choose linting tools (Выберите средства статического анализа): файлы ESLint, Prettier, Lint staged. Choose linting tools: ESLint, Prettier, Lint staged files. Давайте выберем ESLint (инструмент для анализа кода и предупреждения о возможных ошибках). Let’s choose ESLint (a tool for analyzing your code and warning you of potential errors).
• Choose a test framework (Выберите платформу тестирования): None (Нет), Jest, AVA. Choose a test framework: None, Jest, AVA. Давайте выберем Нет, так как мы не будем рассматривать тестирование в этом кратком руководстве. Let’s choose None as we won’t cover testing in this quickstart.
• Choose rendering mode (Выберите режим отрисовки): Universal (SSR) (Универсальный (SSR)) или Single Page App (SPA) (Одностраничное приложение). Choose rendering mode: Universal (SSR) or Single Page App (SPA). Давайте в нашем примере выберем Universal (SSR) (Универсальное приложение (SSR)), однако в документации по Nuxt.js сообщается о некоторых различиях — для SSR требуется сервер Node.js, визуализирующий приложение и SPA для статического размещения. Let’s choose Universal (SSR) for our example, but the Nuxt.js docs point out some of the differences — SSR requiring a Node.js server running to server-render your app and SPA for static hosting.
• Выберите средства разработки: jsconfig.json (рекомендуется для VS Code, чтобы можно было использовать завершение кода IntelliSense). Choose development tools: jsconfig.json (recommended for VS Code so Intellisense code completion works)

После создания проекта выполните команду cd my-nuxtjs-app , чтобы войти в каталог проекта Nuxt.js, а затем введите code . , чтобы открыть проект в среде WSL-Remote в VS Code. Once your project is created, cd my-nuxtjs-app to enter your Nuxt.js project directory, then enter code . to open the project in the VS Code WSL-Remote environment.

После установки Nuxt.js следует запомнить 3 команды: There are 3 commands you need to know once Nuxt.js is installed:

• npm run dev для запуска экземпляра разработки с горячей перегрузкой, просмотра файлов и повторного выполнения задач; npm run dev for running a development instance with hot-reloading, file watching and task re-running.
• npm run build для компиляции проекта; npm run build for compiling your project.
• npm start для запуска приложения в режиме рабочей среды. npm start for starting your app in production mode.

Откройте терминал WSL, интегрированный в VS Code (Вид > Терминал). Open the WSL terminal integrated in VS Code (View > Terminal). Убедитесь, что путь терминала указывает на каталог проекта (т. е.

/NuxtProjects/my-nuxt-app$ ). Make sure that the terminal path is pointed to your project directory (ie.

/NuxtProjects/my-nuxt-app$ ). Затем попробуйте запустить экземпляр разработки нового приложения Nuxt.js с помощью npm run dev Then try running a development instance of your new Nuxt.js app using: npm run dev

Будет запущен локальный сервер разработки (на котором будет отображено несколько интересных индикаторов выполнения для клиента и сервера). The local development server will start (displaying some kind of cool progress bars for the client and server compiles). После завершения создания проекта в терминале отобразится сообщение «Compiled successfully» (Компиляция выполнена успешно) и длительность компиляции. Once your project is done building, your terminal will display «Compiled successfully» along with how much time it took to compile. Укажите в веб-браузере http://localhost:3000, чтобы открыть новое приложение Nuxt.js. Point your web browser to http://localhost:3000 to open your new Nuxt.js app.

Откройте файл pages/index.vue в редакторе VS Code. Open the pages/index.vue file in your VS Code editor. Найдите заголовок страницы Welcome to the Vuetify + Nuxt.js template и измените его на This is my new Nuxt.js app! . Find the page title Welcome to the Vuetify + Nuxt.js template and change it to This is my new Nuxt.js app! . Если в веб-браузере по-прежнему открыт адрес localhost:3000, сохраните изменения и обратите внимание на то, что функция горячей перезагрузки автоматически выполняет компиляцию и отражает изменения в браузере. With your web browser still open to localhost:3000, save your change and notice the hot-reloading feature automatically compile and update your change in the browser.

Давайте посмотрим, как Nuxt.js обрабатывает ошибки. Let’s see how Nuxt.js handles errors. Удалите закрывающий тег , чтобы код заголовка теперь выглядел следующим образом: This is my new Nuxt.js app! . Remove the closing tag so that your title code now looks like this: This is my new Nuxt.js app! . Сохраните это изменение и обратите внимание на то, что в браузере и окне терминала появится сообщение об ошибке компиляции, уведомляющее, что отсутствует закрывающий тег , а также номера строк кода с этой ошибкой. Save this change and notice that a compiling error will display in your browser, and in your terminal, letting your know that a closing tag for is missing, along with the line numbers where the error can be found in your code. Замените закрывающий тег , сохраните проект, и страница будет перезагружена. Replace the closing tag, save, and the page will reload.

Вы можете использовать отладчик VS Code в приложении Nuxt.js, нажав клавишу F5 или выбрав в строке меню Вид > Отладка (Ctrl+Shift+D) либо Вид > Консоль отладки (Ctrl+Shift+Y). You can use VS Code’s debugger with your Nuxt.js app by selecting the F5 key, or by going to View > Debug (Ctrl+Shift+D) and View > Debug Console (Ctrl+Shift+Y) in the menu bar. Если выбрать значок шестеренки в окне «Отладка», будет создан файл конфигурации запуска ( launch.json ), в котором будут сохранены сведения о конфигурации отладки. If you select the gear icon in the Debug window, a launch configuration ( launch.json ) file will be created for you to save debugging setup details. Дополнительные сведения см. в разделе об отладке в VS Code. To learn more, see VS Code Debugging.

Дополнительные сведения о Nuxt.js доступны в руководстве по Nuxt.js. To learn more about Nuxt.js, see the Nuxt.js guide.

Приступая к работе с Gatsby.js Get started with Gatsby.js

Gatsby.js — это платформа генератора статических сайтов, основанная на React.js, которая не использует визуализацию на сервере, как Next.js и Nuxt.js. Gatsby.js is a static site generator framework based on React.js, as opposed to being server-rendered like Next.js and Nuxt.js. Генератор статических сайтов создает статический код HTML во время сборки. A static site generator generates static HTML on build time. Для этого не требуется сервер. It doesn’t require a server. Next.js и Nuxt.js создают HTML во время выполнения (каждый раз, когда поступает новый запрос). Next.js and Nuxt.js generate HTML on runtime (each time a new request comes in). Для их работы требуется сервер. They do require a server to run. Gatsby также определяет, как обрабатываются данные в приложении (с помощью GraphQL), тогда как Next.js и Nuxt.js оставляют это решение за вами. Gatsby also dictates how to handle data in your app (with GraphQL), whereas Next.js and Nuxt.js leave that decision up to you.

Чтобы создать проект Gatsby.js: To create a Gatsby.js project:

Откройте терминал WSL (например, Ubuntu 18.04). Open your WSL terminal (ie. Ubuntu 18.04).

Создайте новую папку проекта: mkdir GatsbyProjects и введите этот каталог: cd GatsbyProjects Create a new project folder: mkdir GatsbyProjects and enter that directory: cd GatsbyProjects

Используйте NPM для установки Gatsby CLI: npm install -g gatsby-cli . Use npm to install the Gatsby CLI: npm install -g gatsby-cli . После установки проверьте версию с помощью gatsby —version . Once installed, check the version with gatsby —version .

Создайте проект Gatsby.js: gatsby new my-gatsby-app Create your Gatsby.js project: gatsby new my-gatsby-app

После установки пакета замените каталоги на папку нового приложения cd my-gatsby-app , а затем используйте code . , чтобы открыть проект Gatsby в VS Code. Once the package has been installed, change directories into your new app folder, cd my-gatsby-app , then use code . to open your Gatsby project in VS Code. Это позволит просмотреть инфраструктуру Gatsby.js, созданную для приложения, в проводнике VS Code. This will allow you to look at the Gatsby.js framework that has been created for your app using VS Code’s File Explorer. Обратите внимание на то, что экземпляр VS Code открыла приложение в среде WSL-Remote (как указано на зеленой вкладке в левом нижнем углу окна VS Code). Notice that VS Code opened your app in a WSL-Remote environment (as indicated in the green tab on the bottom-left of your VS Code window). Это означает, что хотя вы используете VS Code для редактирования в ОС Windows, приложение по-прежнему работает в ОС Linux. This means that while you are using VS Code for editing on the Windows OS, it is still running your app on the Linux OS.

После установки Gatsby следует знать 3 команды: There are 3 commands you need to know once Gatsby is installed:

• gatsby develop для запуска экземпляра разработки с горячей перегрузкой; gatsby develop for running a development instance with hot-reloading.
• gatsby build для создания рабочей сборки; gatsby build for creating a production build.
• gatsby serve для запуска приложения в режиме рабочей среды. gatsby serve for starting your app in production mode.

Откройте терминал WSL, интегрированный в VS Code (Вид > Терминал). Open the WSL terminal integrated in VS Code (View > Terminal). Убедитесь, что путь терминала указывает на каталог проекта (т. е.

/GatsbyProjects/my-gatsby-app$ ). Make sure that the terminal path is pointed to your project directory (ie.

/GatsbyProjects/my-gatsby-app$ ). Затем попробуйте запустить экземпляр разработки нового приложения с помощью gatsby develop Then try running a development instance of your new app using: gatsby develop

После завершения компиляции нового проекта Gatsby в окне терминала отобразится сообщение: «You can now view gatsby-starter-default in the browser. Once your new Gatsby project finishes compiling, your terminal will display that «You can now view gatsby-starter-default in the browser. http://localhost:8000/.» http://localhost:8000/.» Выберите эту ссылку на localhost, чтобы просмотреть созданный проект в веб-браузере. Select this localhost link to view your new project built in a web browser.

Вы заметите, что в терминале также отображено сообщение «View GraphiQL, an in-browser IDE, to explore your site’s data and schema: http://localhost:8000/___graphql» (Просмотрите GraphiQL в браузерной интегрированной среде разработки, чтобы изучить данные и схему своего сайта: http://localhost:8000/___graphql»). You’ll notice that your terminal output also let’s you know that you can «View GraphiQL, an in-browser IDE, to explore your site’s data and schema: http://localhost:8000/___graphql.» GraphQL объединяет интерфейсы API в интегрированную среду разработки с самодокументированием (GraphQL), встроенную в Gatsby. GraphQL consolidates your APIs into a self-documenting IDE (GraphiQL) built into Gatsby. Помимо изучения данных и схемы сайта, можно выполнять такие операции GraphQL, как запросы, изменения и подписки. In addition to exploring your site’s data and schema, you can perform GraphQL operations such as queries, mutations, and subscriptions. Дополнительные сведения см. в статье Introducing GraphiQL (Введение в GraphiQL). For more info, see Introducing GraphiQL.

Откройте файл src/pages/index.js в редакторе VS Code. Open the src/pages/index.js file in your VS Code editor. Найдите заголовок страницы

Hi people

Hi (Your Name)!

Hi people

Hi (Your Name)!

Давайте посмотрим, как Next.js обрабатывает ошибки. Let’s see how Next.js handles errors. Удалите закрывающий тег

Hi (Your Name)! . Remove the

Hi (Your Name)! . Сохраните это изменение и обратите внимание на то, что в браузере и терминале появилось сообщение об ошибке компиляции, в котором сказано, что ожидается закрывающий тег для

. Save this change and notice that a «Failed to compile» error will display in your browser, and in your terminal, letting your know that a closing tag for