package.json используется для хранения метаданных, связанных с проектом, а также для хранения списка пакетов зависимостей. Чтобы добавить в проекты пакеты зависимостей, необходимо создать файл package.json. Этот файл позволяет другим пользователям легко управлять и устанавливать пакеты, связанные с проектом.

Файл package.json:

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

Файл package.json может выглядеть примерно так:

В этом файле описаны все настройки приложения React.

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

  • name - это имя вашего приложения, которое вы даете при выполнении create-react-app<name-of-application>. Вы можете дать приложению любое имя по вашему выбору, единственное условие - оно должно быть в нижнем регистре. Он также может содержать дефисы и символы подчеркивания.
  • version - текущая версия вашего приложения. Поле версии должно иметь вид x.x.x. По умолчанию приложение create-response-app инициализирует его как 0.1.0.
  • "private": true - один из важнейших атрибутов. Смысл в том, что если вы установите private как true в своем package.json, тогда npm откажется публиковать его в экосистеме npm. Это способ предотвратить случайную публикацию частных репозиториев.
  • dependencies содержит все необходимые модули узлов и версии, необходимые для работающего приложения. На снимке выше он содержит три зависимости, что позволяет нам использовать react, react-dom и react-scripts в нашем JavaScript. react-scripts предоставляет набор полезных сценариев разработки для работы с React.

На приведенном выше снимке экрана версия реакции указана как ^16.6.3, что означает, что npm установит самую последнюю основную версию, соответствующую 16.x.x. Напротив, если вы видите что-то вроде ~5.6.7 в package.json, это означает, что будет установлена ​​самая последняя второстепенная версия, соответствующая 5.6.x.

Чтобы добавить пакет под dependencies, при установке используйте --save.

Например, npm install <package-name> --save

По умолчанию пакет указан в dependecies с номером версии.

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

Чтобы добавить пакет в этот список при установке, используйте --save-dev.

Например, npm install <package-name> --save-dev

Таким образом, он добавляется в список devDependencies.

  • scripts определяет псевдонимы, которые можно использовать для более эффективного доступа к некоторым командам сценариев реакции. Например, при запуске npm start в командной строке react-scripts start будет выполняться незаметно. То же верно и для других атрибутов: build, test и т. Д.

По умолчанию create-react-app заботится обо всех основных сценариях для этих операций. Если вы не используете его, вам нужно написать свое собственное.

Могут быть и другие сценарии, например prepush, postbuild, lint, deploy и т. Д. Каждый имеет свой собственный набор команд.

Например, при использовании gh-pages вы можете написать

«Развертывание»: «gh-pages -d build»

Здесь команда указывает, какую ветвь и каталог развернуть.

Приведенный выше набор атрибутов формирует базовый набор атрибутов для файла package.json базового приложения React. Могут быть и другие атрибуты, например,

  • homepage указывает URL-адрес домашней страницы вашего проекта. Это становится удобным в приложениях реагирования, когда вы используете gh-pages, где он развертывает каталог сборки на вашей домашней странице.
  • repository указывает расположение кода для вашего проекта. Это полезно для людей, которые хотят внести свой вклад.
  • license Вы должны указать лицензию для своего проекта, чтобы люди знали, как им разрешено его использовать, и какие ограничения вы налагаете на него.

На приведенном выше снимке экрана также есть еще два атрибута: eslintConfig и browserslist. Оба они являются узловыми модулями, имеющими собственный набор значений. Недавно они были добавлены в create-react-app. С одной стороны, где browserslist предоставляет информацию о совместимости приложения с браузером, eslintConfig заботится о линтинге кода. Для получения дополнительной информации см. Список браузеров и eslintConfig.