Очевидно, вам потребуются некоторые знания JavaScript, HTML и CSS, чтобы начать проект JavaScript. Вам также необходимо установить Node на свой компьютер и иметь базовое представление о Git, хотя вы, вероятно, можете пропустить эту последнюю часть. Но по моему опыту работы с коллегами-программистами, начинающими с JavaScript, и юниорами, участвующими в их первом проекте, единственное, что часто является источником многих недоразумений, - это NPM (диспетчер пакетов узлов).

При установке Node к нему прилагаются две команды: node и npm. Первый используется для выполнения некоторого серверного JavaScript (Node.js), а второй - для установки сторонних пакетов. Проще говоря, NPM - это облако, в котором разработчики публикуют свой код, чтобы другие разработчики могли использовать его в своих проектах. Например, в JavaScript нет функции для выбора случайного элемента из массива, поэтому вы можете использовать пакет random-item. Вместо того, чтобы загружать файлы вручную, вы можете просто запустить npm install random-item в своем проекте. Эта статья в основном посвящена NPM, поэтому я расскажу об этом позже. А пока начнем с самого начала.

В каждом проекте JavaScript есть package.json.

Package.json - это файл, который описывает проект, перечисляет его зависимости (например, random-item в нашем предыдущем примере) и команды. Хотя он может содержать гораздо больше, не стесняйтесь взглянуть на полный список свойств, если вам интересно. Чтобы создать этот файл, вы можете запустить команду npm init в корне вашего проекта. Он поможет вам ответить на несколько вопросов и в конце процесса создаст файл package.json.

Большая часть информации, содержащейся в package.json, полезна при публикации кода в «облаке NPM». Например, имя, описание, ключевые слова и автор - это то, что отображается на специальной странице NPM. Вы можете игнорировать их, если не планируете публиковать пакет, они не подействуют. На данный момент вам нужно знать только три свойства: devDependencies, dependencies и scripts.

Отслеживание зависимостей разработки и производства

Если вы не хотите делать это, как в старые добрые времена jQuery, инструменты стали почти неизбежными в проекте JavaScript. Например, новейшие функции языка поддерживаются не всеми браузерами, поэтому довольно часто код компилируют во что-то, что может быть выполнено любым браузером. Для этого вам потребуется установить Вавилон. Но тогда, если вы хотите разбить свой код на отдельные файлы и использовать импорт, вам также понадобится Webpack. CSS ты сказал? Это что-то в прошлом, вам следует подумать о стилизованных компонентах, модулях CSS или Афродите. Я мог бы продолжать так долго, но вы поняли: есть много вещей, которые вы можете (а могли и не захотеть) установить. Но не бойтесь, вся цель этой серии - установить как можно меньше пакетов.

Инструменты, о которых я говорил до сих пор, предназначены для разработки. Это инструменты, которые необходимо установить на свой компьютер для компиляции кода. В конечном итоге вы будете развертывать скомпилированный код, а не исходный код, поэтому нет смысла устанавливать их на производственном сервере. В качестве примера давайте установим пакет parcel-bundler в качестве зависимости разработки:

npm install parcel-bundler --save-dev

Это обновит наш предыдущий package.json до следующего:

Пакет parcel-bundler был установлен и добавлен в devDependencies с определенным диапазоном версий (^ 1.11.0). Такой способ установки пакетов удобен тем, что вы точно знаете, от чего зависит ваш проект и от какой версии. Что еще более важно, если вы должны git клонировать проект на другом компьютере, вы можете установить все необходимые зависимости, просто запустив npm install. Эта команда найдет ваш файл package.json и установит все зависимости с правильной версией.

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

import randomItem from 'random-item';

const colors = [
  'red',
  'yellow',
  'orange',
  'pink',
  'green'
];

window.document.body.style.backgroundColor = randomItem(colors);

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

npm install random-item

Отсутствие сообщения npm о том, что random-item является зависимостью разработки с флагом --save-dev, предполагает, что это производственная зависимость. Эта команда обновит package.json следующим образом:

Как и devDependencies, dependencies устанавливаются при выполнении команды npm install. Обратите внимание, что редактировать эти свойства вручную довольно редко. В большинстве случаев они обновляются через npm CLI.

Как вы, наверное, догадались, npm install часто является первой командой, запускаемой при клонировании проекта JavaScript. Он включит все зависимости, и все будет в порядке. Следующий шаг - внести свой вклад в проект. Вам нужно будет запустить его и, в конечном итоге, скомпилировать файлы, когда вы внесете изменения. Запуск и компиляция приложения JavaScript отличается от проекта к другому из-за разного инструментария и конфигурации. Не существует одной команды для запуска проекта, хотя есть соглашение, которым я поделюсь в этой статье. Тем не менее, было бы больно запускать parcel index.html --port 3000 --log-level 0 --open каждый раз, когда вы хотите запустить сервер.

Создавайте команды быстрого доступа с помощью скриптов npm

scripts - это свойство package.json, которое содержит команды быстрого доступа. Если вы хотите присвоить предыдущей команде псевдоним «start», вы можете сделать следующее:

Теперь при запуске npm run start npm заглянет в скрипты package.json и выполнит команду, соответствующую «start», а именно:

parcel index.html --port 3000 --log-level 0 --open

Если вы попытаетесь запустить эту команду вместо стартового скрипта (через npm run start), будет выдана ошибка, сообщающая вам, что «parcel» не является известной командой. К счастью, установка пакета в проект JavaScript не приводит к его установке на ваш компьютер. По умолчанию пакеты устанавливаются только локально, в папку «node_modules». Если вы действительно хотите запустить команду самостоятельно, вам нужно будет обновить ее до:

./node_modules/.bin/parcel index.html --port 3000 --log-level 0 --open

Папка «node_modules» содержит папку «.bin» со ссылками на исполняемые команды пакетов (если есть). Этот префикс автоматически добавляется npm при запуске скриптов, так что это еще одна причина для их использования.

Соглашения

Интерфейс командной строки NPM имеет несколько соглашений. Например, команда для запуска проекта обычно называется «start», а команда для тестирования - «test». Для этих команд вы можете опустить часть «запустить» в npm run start, поэтому npm start будет эквивалентным. Есть и другие официальные соглашения, но они не так распространены, как эти два.

Подведение итогов

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

Эта статья является частью серии: