3 факта о package.json, которые нужно знать каждому новичку

Моя статья охватывает самые фундаментальные аспекты диспетчера пакетов узлов (NPM) и package.json. Если вы считаете, что уже хорошо разбираетесь в этой теме, пожалуйста, остановитесь здесь ❌.

В мире JavaScript вы найдете его почти в каждой базе кода: package.json. Как новичок, вы, вероятно, уже знаете, что это важный файл. Но какова его настоящая цель? Как это происходит? И почему вы вообще должны об этом заботиться?

Вот самые важные факты о таинственном файле 👽.

1) Ничего страшного!

Вот так: package.json - это просто текстовый файл, содержащий общую конфигурацию вашего пакета npm в формате JSON.

Как новичок, вы, скорее всего, впервые столкнулись с package.json на уровне приложения (например, при настройке приложения React). Вообще говоря, каждый пакет NPM определяется файлом package.json. Не только ваше приложение считается пакетом, но и все его зависимости.

Давайте посмотрим 👀 на типичный package.json примера приложения React:

{
  "name": "react-app",
  "version": "0.0.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test"
  },
"dependencies": {
    ...
  },
"devDependencies": {
    ...
  }
}

В более крупных проектах конфигурация на первый взгляд может показаться сложной. Но обычно вам не нужно особо заботиться ни о чем, кроме скриптов, зависимостей и devDependencies (по крайней мере, в начале) . Мы расскажем о них позже.

Хорошие новости 👍: вам не нужно начинать с пустой страницы. Файл обычно создается инструментами фреймворка (например, create-response-app, ng new) или создается вручную с помощью следующей команды:

npm init

В мастере инициализации вам будет предложено несколько вопросов относительно имени пакета, версии, автора и так далее. В конце концов, ваш package.json наконец создан и заполнен заданными данными.

2) Он содержит зависимости вашего проекта

Основная задача NPM как менеджера пакетов для модулей JavaScript - обрабатывать зависимости вашего проекта.

В каждом package.json есть два типа зависимостей. Обычные зависимости являются частью вашего производственного приложения. Допустим, вы используете @ material-ui / core для полей формы. Пакет будет использоваться во время разработки, но, конечно, также и каждым конечным пользователем.

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

Каждый раз, когда вы запускаете npm install [package] и добавляете флаг save, зависимость загружает ботов и добавляет их в ваш package.json:

npm install @material-ui/core --save
npm install jest --save-dev

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

npm install

3) Он определяет доступные скрипты

Как вы уже заметили выше, у приложений обычно есть очень важное свойство, называемое scripts в их package.json :

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test"
},

Обычно вы используете эти сценарии 🛠 для подготовки вашего приложения к производству. Например, вы можете отлаживать свой код: start обычно запускает локальный сервер разработки, а test запускает вашу среду тестирования. Кроме того, вы будете использовать build для создания своего приложения (транспиляция, минификация…).

Ключ свойства (например, build) - это имя сценария NPM. Соответствующее значение (response-scripts build) - это команда командной строки, которая запускается при запуске скрипта. Таким образом, следующие команды делают то же самое:

> npm run build
> react-scripts build

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

"lint": "eslint './src/**/*.{ts,tsx}'"

Конечно нет! 👿

И многое другое…

Надеюсь, вы получили первое впечатление о том, что такое package.json и почему вам определенно стоит узнать о нем больше.