Установка nvm windows Node js и npm

NPM — JS: Настройка окружения

Установка Node.js добавляет в систему не только интерпретатор, но и несколько важных утилит для работы с JavaScript-проектами. Среди них утилита npm.

npm выполняет множество важных задач, с которыми мы будем знакомиться в течение курса. Сейчас нас интересует ее базовое использование – создание (инициализация) нового проекта. Под проектом понимается код какого-то приложения, например, конкретного сайта.

Для создания нового проекта нужно выполнить две вещи:

  1. Создать директорию проекта – место, внутри которого будут располагаться все файлы с кодом. Эта директория называется корнем проекта.
  2. Запустить команду инициализации npm init в корне проекта.

В процессе инициализации, npm задаст несколько вопросов на тему того как должен называться проект, какая у него должна быть версия, описание и тому подобное. Все эти вопросы можно смело пропускать, у вас всегда будет возможность поменять ответы.

В конце npm спросит все ли правильно и покажет содержимое файла package.json, который и станет основой нового проекта. После ответа yes этот файл запишется на диск и проект будет считаться готовым к работе.

package.json — это текстовый файл, внутри которого данные хранятся в JSON формате. Этот формат позволяет описывать данные как пары "ключ-значение", где значением может быть сам JSON. В примере выше — это значение ключа scripts.

Обратите внимание на ключ "type" в JSON выше. Эту часть нужно добавить самостоятельно, исправив файл. Она нужна для работы системы импортов.

Источник

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

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

Если вы используете Node.js профессионально и вам нужно оптимизировать скорость и производительность, обеспечить совместимость системных вызовов, выполнять контейнеры Docker, которые используют рабочие области Linux, и не нужно использовать скрипты сборки Linux и Windows или вы просто предпочитаете использовать командную строку Bash, установите Node.js в подсистеме Windows для Linux (точнее, в WSL 2).

Установка nvm-windows, Node.js и npm

Наряду с возможностью выбора системы для разработки (Windows или WSL) при установке Node.js доступны и другие возможности. Мы рекомендуем использовать диспетчер версий, так как версии меняются достаточно быстро. Вероятно, вам придется переключаться между несколькими версиями Node.js в зависимости от потребностей для различных проектов, над которыми вы работаете. Диспетчер версий Node Version Manager, чаще называемый nvm, является наиболее популярным средством установки нескольких версий Node.js, но он доступен только для Mac и Linux и не поддерживается в Windows. Вместо этого выполним шаги ниже, чтобы установить nvm-windows, а затем используем его для установки Node.js и диспетчера пакетов Node Package Manager (npm). Существуют также альтернативные диспетчеры версий, которые описаны в следующем разделе.

Рекомендуем всегда удалять любые имеющиеся установки Node.js или npm из операционной системы перед установкой диспетчера версий, так как эти установки могут создавать необычные и запутанные конфликты. Сюда относится удаление всех существующих каталогов установки Node.js (например, C:\Program Files\nodejs), которые могут остаться. Созданная символьная ссылка NVM не будет перезаписывать существующий (даже пустой) каталог установки. Справку по полному удалению предыдущих установок см. здесь.

Откройте репозиторий windows-nvm в Интернет-браузере и щелкните ссылку Загрузить сейчас.

Скачайте последний выпуск файла nvm-setup.zip.

После скачивания откройте ZIP-файл, а затем запустите файл nvm-setup.exe.

Мастер установки Setup-NVM-for-Windows поможет выполнить все этапы установки, в том числе выбрать каталог, в котором будут установлены репозиторий nvm-windows и Node.js.

Мастер установки NVM для Windows

Установка завершится. откройте PowerShell и попробуйте использовать windows-nvm, чтобы просмотреть список установленных версий Node (на этом этапе их еще не должно быть): nvm ls

Список nvm без версий Node

Установите текущий выпуск Node.js (в нем вы сможете протестировать новейшие улучшенные возможности, но вероятность возникновения проблем при этом будет больше, чем при использовании версии LTS) с помощью команды nvm install latest .

Установите последний стабильный выпуск LTS Node.js (рекомендуется). Для этого сначала выполните поиск номера текущей версии LTS с помощью команды nvm list available , а затем установите версию LTS по номеру с помощью команды nvm install <version> (замените <version> номером, например: nvm install 12.14.0 ).

Список доступных версий nvm

Вызовите список установленных версий Node, выполнив команду nvm ls . Теперь в нем должны отображаться две недавно установленные версии.

Список nvm с установленными версиями Node

После установки требуемых версий Node.js выберите нужную версию, введя nvm use <version> (замените <version> нужным номером, например nvm use 12.9.0 ).

Чтобы изменить версию Node.js на ту, которую вы хотите использовать для проекта, создайте каталог проекта с помощью команды mkdir NodeTest и укажите каталог, выполнив команду cd NodeTest . Затем введите nvm use <version> , заменив <version> номером версии, который вы хотите использовать (т. е. версии 10.16.3).

Проверьте, какая версия npm установлена, с помощью npm —version . Этот номер версии автоматически изменится на номер той версии npm, которая связана с вашей текущей версией Node.js.

Альтернативные диспетчеры версий

Несмотря на то что windows-nvm сейчас является самым популярным менеджером версий для Node, есть несколько альтернативных вариантов:

nvs (Node Version Switcher) — это кроссплатформенный вариант nvm с возможностью интеграции с VS Code.

Volta — это новый диспетчер версий, созданный командой LinkedIn. Заявлено, что он отличается увеличенной скоростью и межплатформенной поддержкой.

Чтобы установить Volta в качестве диспетчера версий (вместо windows-nvm), перейдите в раздел Установка Windows руководства Начало работы, затем скачайте и запустите установщик Windows, следуя инструкциям.

Перед установкой Volta необходимо убедиться, что на компьютере с Windows включен режим разработчика.

Дополнительные сведения об использовании Volta для установки нескольких версий Node.js в Windows см. в документации по работе с Volta.

Установка Visual Studio Code

Для разработки с помощью Node.js в Windows рекомендуем установить Visual Studio Code, а также пакет расширений Node.js. Установите их все или выберите наиболее полезные для вас.

Чтобы установить пакет расширений Node.js, сделайте следующее:

  1. Откройте в VS Code окно Расширения (нажав клавиши CTRL+SHIFT+X).
  2. В поле поиска в верхней части окна расширений введите: Node Extension Pack (Пакет расширений Node) (или имя любого расширения, которое необходимо найти).
  3. Выберите пункт Установить. После установки расширение появится в папке "Включено" в окне Расширения. Вы можете отключить, удалить или настроить параметры, выбрав значок шестеренки рядом с описанием вашего нового расширения.
Читайте также:  КРУНН наружной установки с вакуумником

К дополнительным рекомендуемым расширениям относятся следующие:

    — после завершения разработки на стороне сервера с помощью Node.js вам нужно будет выполнить разработку и тестирование на стороне клиента. Это расширение интегрирует редактор VS Code со службой отладки браузера Chrome, что увеличивает эффективность выполнения операций. — эти расширения позволят использовать необходимую раскладку при переходе в другой текстовый редактор (например, Atom, Sublime, Vim, eMacs, Notepad++ и т. п.). — позволяет синхронизировать параметры VS Code в разных установках, используя GitHub. Если вы работаете на разных компьютерах, это обеспечит согласованность среды между ними.

Альтернативные редакторы кода

Если вы предпочитаете использовать редактор кода или интегрированную среду разработки, отличные от Visual Studio Code, для среды разработки Node.js также подходят следующие варианты:

Установка GIT

Если вы планируете работать совместно с другими пользователями или размещать проект на сайте с открытым исходным кодом (например, GitHub), примите во внимание, что VS Code поддерживает управление версиями с помощью Git. Вкладка системы управления версиями в VS Code отслеживает все изменения и содержит общие команды Git (добавление, фиксация, принудительная отправка, извлечение) прямо в пользовательском интерфейсе. Сначала необходимо установить Git для включения панели управления версиями.

Скачайте и установите Git для Windows с веб-сайта git-scm.

В комплект входит мастер установки, который задает вам ряд вопросов о параметрах установки Git. Рекомендуется использовать все параметры по умолчанию, если у вас нет конкретной причины изменить какой-либо из них.

Если вы никогда не использовали Git, обратитесь к руководствам по GitHub. Они помогут вам приступить к работе.

Источник

Как установить NodeJS и NPM в Windows

NodeJS (Node.js) это один из вариантов Chrome V8 Javascript runtime engine. Он позволяет программистам выполнять JavaScript код на серверной стороне. Nodejs пользуется популярностью у разработчиков за его скорость и эффективность. Разработчики могу использовать JavaScript как для Frontend задач, так и для связи с backend сервисами.

В статье ниже я расскажу, как установить Nodejs и NPM в Windows

Установка Nodejs в Windows

Загрузить официальный установочный пакет вы можете с официального сайта NodeJS

Запустите установочный пакет и следуйте мастеру установки. Процесс установки типичен для остальных Windows приложений.

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

Чтобы проверить корректность установки NodeJS , откройте командую строку. Это можно сделать нажав комбинацию клавиш Win + R , введя cmd и нажав Enter . В открывшейся командной строке введите node —version и npm —version , чтобы проверить версии NodeJS и NPM соответственно. Для этой инструкции был использован уже работающий проект с NodeJS, поэтому версия отличается от актуальной.

Обновление NodeJS в Windows

Версии NodeJS выходят очень часто. Многие используют версии с длительной поддержкой ( LTS ). Для установки обновления NodeJS — повторите действия, описанные на этапе " Установка Nodejs в Windows ". При этом старая версия будет заменена новой.

Источник



Установка и настройка npm

Когда речь заходит о создании простого фронт-энд проекта, то как начать? Какие инструменты вам нужны? Я подозреваю, что у каждого будет свой ответ. Вы начинаете с каркаса (JS или CSS), или готового шаблона? Возможно, вы используете таск-менеджер для выполнения задач (например, Gulp) для организации потребностей вашего проекта. Или вы начинаете с простого HTML и CSS-файла?

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

  1. Введение в использование скриптов NPM для компиляции Sass, запуска дев-сервера с автоматической перезагрузкой страниц.
  2. Настройка и работа с Parcel, упаковщик модулей (сокращённо можно называть бандлер) с минимальной конфигурацией.
  3. Построение многократного используемой Sass архитектуры

Не стесняйтесь пропускать те части, с которыми вы уже знакомы.

Зачем нужен репозиторий для стартового проекта?

В любом проекте вы, скорее всего, захотите иметь такие инструменты:

  • Запускать локальный сервер
  • Компилировать SCSS в CSS и минимизировать выходные данные
  • Атоматически перезагружать старницы при изменениях
  • Оптимизировать изображения
  • Создавать спрайты для SVG иконок

В более крупных проектах существует гораздо больше вариантов инструментов, которые мы могли бы добавить в набор, чтобы помочь нам создать эффективные и доступные веб-сайты. Возможно, нам понадобится упаковщик модулей, разделение кода и преобразование js кода (например из typescript в javascript). Что касается CSS, возможно, мы хотели бы подключить наши критически важные CSS или очистить неиспользуемые селекторы.

Если вы не знаете, что означают некоторые из этих слов, вы не одиноки! Фронт-энд стал гораздо более сложным в последние годы, и может быть трудно идти в ногу с постоянными изменениями для использования лучших практик. Одна статья, которая действительно помогла мне понять обширный инструментарий, который в наши дни попадает в область разработки фронт-энд разработчиков — Современный Javascript для динозавров. Хотя этой статье несколько лет, она все еще чрезвычайно актуальна и кратко объясняет, как Javascript превратился в такую жизненно важную часть нашего рабочего процесса.

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

Выбор инструментов

Я не тот человек, который любит проводить время, устанавливая и настривая сложные инструменты. Я хочу, чтобы установка инструментов требовала от меня как можно меньше времени, чтобы я мог сконцентрироваться на том, что я люблю делать! Хотя я использовал Gulp в прошлом, сейчас это кажется не такой необходимой частью инструментария: практически все зависимости можно установить через NPM и настроить их с помощью скриптов NPM не сложнее, чем настроить их с помощью Gulp. Поэтому использвание таск-менеджера кажется немного избыточным и только добавляет дополнительную зависимость к проекту.

Читайте также:  Монтаж теплого пола под ключ в Рязани

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

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

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

Самое первое, что нам нужно сделать, чтобы настроить наш проект на работу со скриптами в NPM, это убедиться, что у нас установлен Node.js глобально. Звучит достаточно просто, но уже сейчас все становится немного сложнее, когда мы понимаем, что существует ряд различных способов как это сделать:

    и следуйте инструкциям по установке.
  • Используйте менеджер пакетов, подобный Homebrew для Mac, который позволяет нам обновлять нашу версию узла простой командой: brew upgrade node .
  • Использование NVM (Менеджер версий Node).

NVM — это мой предпочтительный вариант, так как он позволяет нам легко обновить версию узла, посмотреть, какую версию мы используем, перечислить другие установленные версии или переключиться на другую версию с помощью одной команды. Но описание установки NPM состоит из множества шагов, что выходит за рамки этой конкретной статьи.

После установки Node (любым удобным для вас способом) вы можете проверить текущую установленную версию, запустив node -v . Если вы используете NVM, вы можете (опционально) создать конфигурационный файл .nvmrc , чтобы убедиться, что вы всегда запускаете правильную версию Node для вашего проекта.

При установке Node также устанавливается NPM (менеджер пакетов Node Package Manager). Это, по сути, огромная библиотека инструментов (или пакетов) разработки Javascript с открытым исходным кодом, которые может опубликовать любой желающий. Мы имеем прямой доступ к этой библиотеке инструментов и можем установить любой из них в нашем проекте.

NPM или Yarn?

Yarn — является альтернативным менеджером пакетов, похожим на NPM, и почти таким же популярным. На самом деле, многие люди считают его улучшением NPM. Он может быть использован аналогичным образом, для установки зависимостей. Если вы предпочитаете использовать Yarn, а не NPM, вы можете безопасно заменить команды NPM на команды, эквивалентные Yarn, где бы они ни использовались в этой статье.

Обратите внимание, используем ли мы Yarn или NPM, мы все еще устанавливаем пакеты NPM. Yarn — это просто инструмент CLI, нет никакой другой библиотеки пакетов Yarn. Ещё одна из многих запутанных вещей в экосистеме Javascript!

Инициализация проекта

Сначала создадим новую папку проекта, которую будем (воображаемо) называть npm-starter-project . Откройте терминал и выполните команду внутри этой папки:

Выполнение этой команды вызывает несколько шагов для инициализации нашего проекта в командной строке, таких как добавление имени и описания. Вы можете нажать Enter, чтобы пропустить каждый из них, если вы хотите завершить их сразу — мы сможем отредактировать их позже. Затем вы увидите, что был создан файл package.json , который должен выглядеть примерно так:

Этот файл содержит всю информацию о нашем проекте, и здесь мы можем редактировать детали, которые мы только что пропустили.

Все пакеты, которые мы устанавливаем из NPM, будут автоматически перечислены в файле package.json . Здесь же мы настроим скрипты, которые будут собирать и запускать наш проект. Вскоре мы установим некоторые пакеты и настроим их, но сначала нам понадобится базовая архитектура проекта, а также некоторые файлы для работы.

Структура проекта

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

Мы уже сгенерировали package.json в корне проекта. Нам просто нужно создать каталог под названием src , содержащий каталоги для изображений (images), javascript (js), стилей (scss) и иконок (icons), а также файл index.html .

Создание структуры папок из командной строки

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

Построчно, этот код:

  1. Создает новый файл index.html
  2. Создает новую директорию src и перемещает нас в новую директорию
  3. Создает внутри src директории, называемые js , scss , images и icons , а также файл index.html.
  4. Возвращает нас к корню проекта.

Теперь давайте добавим в наш файл index.html следующий код, чтобы мы могли видеть наш сайт в браузере:

Установка зависимостей

Теперь, когда у нас есть основная структура директорий, мы можем начать установку некоторых пакетов и написать скрипты NPM, которые позволят нам создавать и просматривать наш сайт. Скрипты, которые мы собираемся написать, будут:

  • Запустить локальный сервер
  • Компилировать Sass в CSS
  • Наблюдать за изменениями и перезагружать страницу при каждом обновлении HTML или CSS.

Установим пакет node-sass из NPM, который компилирует .scss файлы в CSS. В терминале запустите:

После выполнения этой команды вы должны увидеть пару новых вещей:

  1. Создан каталог под названием node_modules .
  2. В файле package.json , node-sass находится в списке «devDependencies» .
  3. Добавился файл package-lock.json . Этот файл нем ни в коем случае не стоит как-то изменять.

Добавление .gitignore

Каталог node_modules — это каталог, где будет жить код для всех зависимостей нашего проекта. Содержимое этой папки не должно быть привязано к Github (или вашему любимому хостингу репозиториев), так как установка всего нескольких зависимостей может привести к сотням тысяч файлов! Итак, следующее, что нам нужно сделать, это добавить файл .gitignore в корень проекта:

Читайте также:  Установка Minecraft Все способы и решения ошибок

Эта команда создает файл .gitignore и добавляет в него node_modules . (Опять же, вы можете сделать это вручную, если хотите). Теперь мы в безопасности, зная, что наши пакеты не будут зафиксированы.

Если мы не фиксируем эти файлы, то как мы можем поделиться нашими зависимостями с другими пользователями? Ну, это возможно сделать в файле package.json . Он сообщает нам имя и номер версии всех зависимостей, которые мы установили. Любой, кто клонирует проект (включая нас, когда мы используем его для запуска нового проекта), может просто запустить npm install , и все связанные зависимости будут получены и загружены из NPM.

Виды зависимостей

Когда мы установили node-sass , мы запустили команду install с флагом -D . Таким образом, проект устанавливается как «зависимость для разработки». Другие пакеты могут не требовать эту команду, и сохранить пакет в разделе «dependencies» . Разница в том, что обычные зависимости являются зависимостями времени выполнения (т.е. они будут выполнятся в браузере), в то время как зависимости для разработки (dev dependencies) нужны только во время разработки проекта.

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

Пишем сценарии NPM

Теперь пришло время написать несколько скриптов для запуска нашего проекта. Мы напишем их в разделе «scripts» нашего сайта package.json .

Sass в CSS

NPM скрипты состоят из ключа (имя скрипта, которое мы вводим в терминал для запуска) и значения — самого скрипта, который будет выполняться при запуске команды. Сначала мы напишем скрипт, который компилирует Sass в CSS. Мы дадим ему название scss (мы можем назвать его как угодно) и добавим в раздел «scripts» :

Пакет node-sass содержит опции и некоторые из них мы указываем в команде скрипта. Мы определяем стиль вывода compressed , выходной каталог dist/css и каталог с исходниками src/scss , который в настоящее время пуст. Создадим исходный .scss файл из терминала:

Добавьте несколько стилей во вновь созданный файл, затем вернитесь в терминал и запустите выполните:

После этого вы должны увидеть новую директорию под названием dist , содержащую ваш скомпилированный CSS. Теперь, каждый раз, когда вы вносите изменения в свой файл styles.scss , вы можете запускать скрипт, и эти изменения будут компилироваться.

Автоматическая перезагрузка страниц

Наш первый скрипт отлично работает, но он пока не очень полезен, так как каждый раз, когда мы вносим изменения в наш код, нам нужно возвращаться в терминал и запускать скрипт снова. Было бы гораздо удобнее, если бы мы запустили локальный сервер и увидели, как наши изменения мгновенно отражаются в браузере. Для этого мы напишем скрипт, использующий Browsersync , который мы уже установили.

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

В опции —files мы перечисляем файлы, которые Browsersync должен отслеживать. Он перезагрузит страницу при любом из изменений сделанных в этих файлах. Если мы запустим этот скрипт сейчас ( npm run serve ), он запустит локальный сервер, и мы сможем предварительно просмотреть нашу веб-страницу, перейдя на http://localhost:3000 в браузере.

Отслеживание изменений

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

  1. Следить за изменениями в нашем каталоге src/scss .
  2. Когда происходит изменение, скомпилировать его в CSS в dist/css .
  3. После обновления файла dist/css следует перезагрузить страницу.

Сначала нам нужно установить пакет NPM onchange , чтобы следить за изменениями в исходных файлах:

Мы можем написать скрипт NPM, который запускает другие сценарии. Давайте добавим скрипт, который следит за изменениями и запускает наш скрипт scss :

Скрипт watch:css отслеживает изменения, используя пакет onchange (src/scss) и запускает наш скрипт scss , когда происходят изменения.

Комбинирование скриптов

Теперь нам нужно запустить две команды параллельно: Команду serve для запуска нашего сервера и команду watch:css для компиляции нашего Sass в CSS, которая вызовет перезагрузку страницы. Используя скрипты NPM, мы можем легко выполнять команды последовательно, используя оператор && :

Однако вариант с последовательным запуском нам не подходит, поскольку скрипт start будет ждать до тех пор, пока скрипт serve не завершит работу, прежде чем он начнет выполнять скрипт scss . Если мы добавим этот скрипт, а затем запустим его в терминале ( npm start ), то npm run scss не будет запущен, пока мы не остановим сервер.

Чтобы мы могли запускать команды параллельно, нам нужно установить другой пакет. NPM имеет несколько вариантов на выбор. Тот, который выбрал я npm-run-all :

Основными опциями этого пакета (или, по крайней мере, те, которые нас волнуют) являются run-s и run-p . Первая предназначена для последовательной работы, вторая — для параллельной работы со скриптами. Как только мы установим этот пакет, мы сможем использовать его для написания скрипта, который будет запускать одновременно наши скрипты serve и watch:css . Мы назовем этот скрипт start .

Теперь у нас есть очень простой стартовый проект. Мы написали несколько скриптов, которые позволяют нам просто набирать команду npm start , чтобы запустить сервер, следить за изменениями, компилировать Sass в CSS и перезагружать страницу. Пример репозитория можно найти здесь.

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

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

Источник