В этом руководстве мы подробно рассмотрим файл package.json для проекта React Native. Мы объясним каждую часть конфигурации, чтобы даже новичок мог понять, что и зачем используется.
Файл package.json
Файл package.json содержит метаданные проекта и список зависимостей. Он также определяет скрипты, которые можно запускать для выполнения различных задач.
{
"version": "1.0.0",
"private": true,
"main": "expo/AppEntry.js",
"scripts": {
"start": "npx expo start",
"android": "expo run:android",
"beauty:package": "npx prettier --write package.json",
"check": "npx prettier . --check",
"format": "npx prettier --write .",
"ios": "expo run:ios",
"lint": "npx expo lint .",
"lint:fix": "npx eslint . --fix",
"format:prettier": "npx prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md}\"",
"ts:check": "npx tsc",
"web": "npx expo start --web"
},
"dependencies": {
"@expo/metro-runtime": "~3.2.1",
"@react-native-async-storage/async-storage": "1.23.1",
"@react-navigation/bottom-tabs": "^6.5.20",
"@react-navigation/native": "^6.1.17",
"@react-navigation/native-stack": "^6.9.26",
"@react-navigation/stack": "^6.3.29",
"@reduxjs/toolkit": "^2.2.5",
"@sentry/react-native": "~5.22.0",
"@types/react-navigation": "^3.4.0",
"axios": "^1.7.2",
"babel-plugin-module-resolver": "^5.0.2",
"expo": "~51.0.9",
"expo-font": "~12.0.7",
"expo-network": "~6.0.1",
"expo-status-bar": "~1.12.1",
"expo-updates": "~0.25.17",
"formik": "^2.4.6",
"lodash.debounce": "^4.0.8",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.74.2",
"react-native-fast-image": "^8.6.3",
"react-native-gesture-handler": "~2.16.1",
"react-native-logs": "^5.1.0",
"react-native-reanimated": "~3.10.1",
"react-native-reanimated-carousel": "^3.5.1",
"react-native-safe-area-context": "4.10.1",
"react-native-screen": "^1.0.1",
"react-native-screens": "3.31.1",
"react-native-svg": "15.2.0",
"react-native-swiper": "^1.6.0",
"react-native-web": "~0.19.10",
"react-redux": "^9.1.2",
"redux-persist": "^6.0.0",
"reselect": "^5.1.0",
"rn-range-slider": "^2.2.2",
"yup": "^1.4.0"
},
"devDependencies": {
"@babel/core": "^7.24.0",
"@eslint/js": "^9.3.0",
"@react-native/babel-preset": "^0.74.83",
"@react-native/metro-config": "^0.74.83",
"@react-native/typescript-config": "^0.74.83",
"@tsconfig/react-native": "^3.0.5",
"@types/jest": "^29.5.12",
"@types/node": "^20.12.13",
"@types/react": "~18.2.79",
"@types/react-redux": "^7.1.33",
"@types/react-test-renderer": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^7.11.0",
"@typescript-eslint/parser": "^7.11.0",
"babel-eslint": "^10.1.0",
"eslint": "^8.57.0",
"eslint-config-expo": "^7.1.2",
"eslint-config-prettier": "^9.1.0",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-better-styled-components": "^1.1.2",
"eslint-plugin-eslint-comments": "^3.2.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jest": "^28.5.0",
"eslint-plugin-json-format": "^2.0.1",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-perf-standard": "^1.0.3",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-promise": "^6.2.0",
"eslint-plugin-react": "^7.34.2",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-native": "^4.1.0",
"eslint-plugin-react-redux": "^4.1.0",
"eslint-plugin-simple-import-sort": "^12.1.0",
"eslint-plugin-sort-keys": "^2.3.5",
"expo-module-scripts": "^3.5.2",
"install": "^0.13.0",
"npx": "^10.2.2",
"prettier": "^3.2.5",
"prettier-eslint": "^16.3.0",
"prettier-eslint-cli": "^8.0.1",
"prettier-plugin-organize-imports": "^3.2.4",
"prettier-plugin-packagejson": "^2.5.0",
"prettier-plugin-sort-json": "^4.0.0",
"prettier-plugin-stylus": "^0.1.0",
"sort-package-json": "^2.10.0",
"stylelint-prettier": "^5.0.0",
"typescript": "~5.3.3",
"typescript-eslint": "^7.11.0"
}
}Подробное описание
version
Ключ "version" указывает текущую версию вашего проекта. Это полезно для управления версиями и отслеживания изменений.
private
Ключ "private" указывает, что проект является частным и не должен быть опубликован в публичных репозиториях, таких как npm.
main
Ключ "main" указывает на главный файл вашего проекта. В данном случае это expo/AppEntry.js.
scripts
Секция "scripts" содержит команды, которые можно запускать с помощью npm. Рассмотрим их подробнее:
"start": "npx expo start"- Запускает проект в режиме разработки."android": "expo run:android"- Собирает и запускает проект на Android-устройстве или эмуляторе."beauty:package": "npx prettier --write package.json"- Форматирует файлpackage.jsonс помощью Prettier."check": "npx prettier . --check"- Проверяет форматирование всех файлов в проекте с помощью Prettier."format": "npx prettier --write ."- Форматирует все файлы в проекте с помощью Prettier."ios": "expo run:ios"- Собирает и запускает проект на iOS-устройстве или симуляторе."lint": "npx expo lint ."- Проверяет код на наличие ошибок с помощью ESLint."lint:fix": "npx eslint . --fix"- Исправляет ошибки в коде с помощью ESLint."format:prettier": "npx prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md}\""- Форматирует файлы в директорииsrcс указанными расширениями с помощью Prettier."ts:check": "npx tsc"- Проверяет проект на наличие ошибок TypeScript."web": "npx expo start --web"- Запускает проект в веб-режиме.
dependencies
Секция "dependencies" содержит список зависимостей, необходимых для работы вашего проекта. Рассмотрим некоторые из них:
"@expo/metro-runtime": "~3.2.1"- Библиотека для работы с Metro Bundler в Expo."@react-native-async-storage/async-storage": "1.23.1"- Библиотека для работы с асинхронным хранилищем данных."@react-navigation/bottom-tabs": "^6.5.20"- Библиотека для создания нижней панели навигации."@react-navigation/native": "^6.1.17"- Основная библиотека для навигации в React Native."@reduxjs/toolkit": "^2.2.5"- Набор инструментов для работы с Redux."axios": "^1.7.2"- Библиотека для выполнения HTTP-запросов."expo": "~51.0.9"- Основная библиотека Expo."react": "18.2.0"- Основная библиотека React."react-native": "0.74.2"- Основная библиотека React Native."react-redux": "^9.1.2"- Библиотека для интеграции Redux с React."redux-persist": "^6.0.0"- Библиотека для сохранения состояния Redux в локальном хранилище."yup": "^1.4.0"- Библиотека для валидации данных.
devDependencies
Секция "devDependencies" содержит список зависимостей, необходимых для разработки проекта. Рассмотрим некоторые из них:
"@babel/core": "^7.24.0"- Основная библиотека Babel для трансформации кода."eslint": "^8.57.0"- Библиотека для анализа кода и поиска ошибок."prettier": "^3.2.5"- Библиотека для форматирования кода."typescript": "~5.3.3"- Язык программирования TypeScript."@typescript-eslint/eslint-plugin": "^7.11.0"- Плагин ESLint для TypeScript."@typescript-eslint/parser": "^7.11.0"- Парсер ESLint для TypeScript.
Заключение
Теперь вы знаете, как настроить файл package.json для проекта React Native и что означает каждая настройка. Это поможет вам лучше понять, как управлять зависимостями и скриптами в вашем проекте.
