Как стать Front-end разработчиком? #4 Менеджеры пакетов

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

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

Способы загрузки сторонних библиотек

• Скачать .js, .css файлы с ресурса, где хранится библиотека , сохранить их в директорию своего проекта, подключить в главном файле html через тег script или link и указать путь к файлу.
• Подключить онлайн через CDN(Content Delivery Network). Принцип такой же подключаем скрипт или стиль через script/link соответственно, только указываем ссылку на библиотеку в хранилище CDN вместо локального пути. Для работы такого скрипта потребуется доступ к интернету.
• Использовать менеджеры пакетов NPM (Node Package Manager) или Yarn от компании Facebook - наиболее продвинутый способ загрузки библиотек. Для того чтобы установить пакет таким образом, будет необходимо прописать пару команд в консоли (об этом ниже).

Менеджеры пакетов - это хранилище пакетов (модулей), с помощью которого вы можете установить модуль себе в проект. В пакете содержиться файл инструкция package.json, а также необходимый для работы библиотеки код.

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

Что выбрать - NPM или Yarn?

Они выполняют одну и ту же функцию - загружают пакеты в приложение. Я выбрал Yarn, потому что на тот момент он работал быстрее, но сейчас NPM догнал его по скорости. Таким образом, вопрос о том, что бы выбрать - это скорее дело личного предпочтения и привычки.

Установка NPM

1. Установите nodejs на свой компьютер, (если он еще не установлен).
2. Затем нужно проверить, правильно ли установлен nodejs и npm. Войдите в удобную для вас консоль и пропишите node --version для проверки nodejs и npm --version для проверк npm. Если все установлено верно, то вы увидите версию установленного node и npm.
3. Для того, чтобы обновить npm до последней версии - npm install npm@latest -g (Опционально).

Флаг -g (длинная версия --global) означает global - установку пакета на компьютер в целом, а не локально в директорию проекта.

Установка Yarn

1. Так же, как и в случае с npm устанавливаем nodejs. Если он уже установлен, пропускаем шаг.
2. Скачиваем инсталлятор yarn и устанавливаем у себя на компьютере.
3. Готово. Проверяем версию в консоли yarn --version.

В качестве консоли я использую встроенный терминал VSCode - View->Terminal и conemu

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

Ресурсы для изучения

Русскоязычные

• Документация yarn - подробно о yarn
• Список команд
• Yarn docs - Удобное сравнение команд npm и yarn

Англоязычные

• NPM - документация, она объемная и не совсем понятная, в основном описаны основные команды, которые используются постоянно (install, uninstall, init, start, run, build), а остальные упоминаются редко.
• Beginners guide

План действий

1. Установите nodejs на компьютер.
2. Перейдите в папку проекта и пропишите в консоли (путь в консоли должен соответствовать вашей корневой папке проекта) npm init или yarn init для того чтобы инициализировать менеджер пакетов в своей корневой директории.
3. В папке проекта появится файл package.json и в случае установки любого пакета - папка с кодом node_modules(устанавливаемые пакеты регистрируются в файле package.json в зависимостях (dependencies) или зависимостях разработчика (devDependencies), это зависит от типа установки.
4. Пропишите в консоли npm install [название пакета] или yarn add [название пакета] для того чтобы установить модуль (например lodash - yarn add lodash).
5. Теперь вы можете импортировать установленную библиотеку и использовать ее у себя в файле (в примере указана библиотека lodash).

EcmaScript 5 (JavaScript) старая версия импорта (без использования сборщика проектов)

const _ = require("lodash");
console.log(_.isString("строка")); // true

EcmaScript 6 новый способ импорта (если используется сборщик проектов вроде Webpack)

import _ from "lodash"
console.log(_.isString(5)); // false

6. Пройдя пункты, описанные выше вы наверняка зададитесь массой вопросов . Смотрите основные команды yarn/npm в документации и прочитайте простой гайд.
7. Усвоив основные принципы работы с менеджером пакетов - начинайте использовать в своих проектах.

Послесловие

Поначалу может показаться,что все это только усложняет работу, что проще импортировать нужный файл тегом script в html файле. Но на стороне менеджеров пакетов есть пара очень весомых преимуществ:

• Простота установки модулей (командой в консоли)
• Простота поддержки актуальных версий пакета (апдейт до новой версии одной командой в консоли

Поняв принцип работы менеджеров пакетов и изучив основные команды, вы сможете добавлять, удалять и обновлять библиотеки в своем проекте одной командой!