File package.json

Quando si crea un nuovo progetto si devono conservare molte informazioni utili al progetto, come ad esempio:

• la licenza d’uso del software
• l’autore
• la versione
• le dipendenze (di vario tipo)
• e molto altro

Il file package.json serve per tenere insieme tutte queste informazioni in un archivio con formato JSON, e mantenere manualmente queste informazioni può diventare impegnativo, soprattutto per le dipendenze.

Per questo motivo quando si installa e si rimuovono moduli da un progetto usando npm, le modifiche di package.json sono automatizzate.

Esistono vari modi per generare un file package.json, ad esempio (puoi saltare al quarto punto):

• per un progetto totalmente senza nessuna dipendenza
  • npm init
  • appaiono delle domande che aiutano a creare un piccolo package.json
• per installare le dipendenze di un progetto da git
  • prima ottengo il codice sorgente del progetto, poi eseguo:
  • npm install
• per un progetto creato tramite un altro modulo-inizializzatore “create-x-y-z” preventivamente installato a livello globale
  • ATTENZIONE: purtroppo create-react-native-app aggiungerà Expo come dipendenza
  • vedere articolo collegato: npx init

npx init

• Per creare un progetto semi-vuoto, devi avere installato react-native a livello globale.
  • cd progetto
  • react-native init Progetto
  • crea una sottocartella e poi una cartella ./android
  • i seguenti moduli sono già nelle dipendenze-dev
    • eslint
    • jest
    • typescript
    • babel
    • prettier

Vediamo un esempio di package.json, in cui si possono osservare le varie sezioni del file:

• name
• version
• main
• private
• scripts
• dependencies
• devDependencies

{
  "name": "progetto",
  "version": "0.0.1",
  "main": "lib/index.js",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint --ext .js ",
    "start": "react-native start",
    "test": "jest",
    "flow": "flow",
    "build": "babel /src -d /lib"
  },
  "dependencies": {
    "@babel/preset-flow": "^7.18.6",
    "@react-navigation/bottom-tabs": "^6.5.3",
    "flow-bin": "^0.198.2",
    "react": "18.2.0",
    "react-native": "0.71.1",
    "react-native-safe-area-context": "^4.5.0",
    "react-native-screens": "^3.19.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.12",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.13",
    "@react-native-community/eslint-config": "^3.2.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.2.1",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.32.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "^0.73.7",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "jest": {
    "preset": "react-native"
  }
}

ATTENZIONE: il file di progetto package-lock.json non deve essere modificato manualmente.

macOS e iOS

Nel caso di compilazione di un progetto react-native per iOS si può aggiungere questa dipendenza opzionale

  ...
"optionalDependencies": {
    "ios-deploy": "^1.12.1"
  },

  ...