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.