Questa guida è intesa come riferimento per me stesso durante la configurazione delle app React Native con Typescript. Spiega i passaggi necessari per configurare tre diversi modi di configurare gli alias di percorso durante la creazione di un'applicazione React Native.

Obiettivi:

• Come configurare l'alias del percorso per le directorycomponents/*
• Come configurare l'alias di percorso globale per la directory srcsrc/*
• Come configurare l'alias di percorso globale per la directory src con prefisso@/*

Immagina di avere la seguente configurazione nuda per un progetto React Native:

/Users/skaan/Dev/rnapp
├── App.tsx
├── app.json
├── babel.config.js
├── package.json
├── src
|  ├── components
|  |  ├── form
|  |  |  ├── TextInput.tsx
|  |  |  └── index.tsx
|  ├── index.tsx
|  └── screens
|     └── Auth
|        └── index.tsx
|        └── AuthForm.tsx
├── tsconfig.json
└── yarn.lock

import { TextInput } from “../../components/form”

Come configurare l'alias del percorso per le directory

Il primo obiettivo è configurare il progetto in modo tale da poter utilizzare importazioni assolute per directory specifiche come

import { TextInput } from “components/form”

1. Impostare Path Alias ​​per Typescript

Dobbiamo modificare tsconfig.json per dire a Typescript dove può trovare i nostri moduli

// tsconfig.json
{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "components/*": ["src/components/*"]
    }
  },
  ...
}

Dobbiamo anche dire a React Native dove prendere i nostri file, a questo scopo dobbiamo configurare Babel.

Installa la babel-plugin-module-resolverdipendenza come sviluppatore

yarn add --dev babel-plugin-module-resolver
npm install -save-dev babel-plugin-module-resolver

// babel.config.js
module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    [
      "module-resolver",
      {
        root: ["./src"],
        extensions: [".ios.js", ".android.js", ".js", ".ts", ".tsx", ".json"],
        alias: {
          "components/": "./src/components"
        },
      },
    ],
  ],
}

Come configurare l'alias del percorso per la directory src

Il secondo obiettivo è consentire al progetto di utilizzare importazioni assolute per la directory src :

import { TextInput } from “src/components/form”

1. Impostare Path Alias ​​per Typescript

Dobbiamo modificare tsconfig.json per includere un alias di percorso per la directory src

// tsconfig.json
{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "components/*": ["src/components/*"],
      "src/*": ["src/*"]
    },
  },
  ...
}

Dobbiamo anche dire a React Native dove prendere i nostri file, a questo scopo dobbiamo aggiungere anche la mappatura per la directory src a Babel.

// babel.config.js
module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    [
      "module-resolver",
      {
        root: ["./src"],
        extensions: [".ios.js", ".android.js", ".js", ".ts", ".tsx", ".json"],
        alias: {
          "components/": "./src/components",
          "src/": "./src"
        }
      }
    ]
  ]
}

Il terzo obiettivo è consentire al progetto di utilizzare importazioni assolute per la directory src con un prefisso.

import { TextInput } from “@/components/form”

Questa è l'opzione che di solito scelgo, poiché è abbastanza conveniente. Puoi distinguere chiaramente importazioni relative, importazioni assolute e importazioni da node_modules .

1. Impostare Path Alias ​​per Typescript

Dobbiamo modificare tsconfig.json per includere un alias di percorso per la directory src

// tsconfig.json
{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
  },
  ...
}

Dobbiamo anche dire a React Native dove prendere i nostri file, a questo scopo dobbiamo aggiungere la mappatura per la directory src a Babel con il prefisso utilizzato.

// babel.config.js
module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    [
      "module-resolver",
      {
        root: ["./src"],
        extensions: [".ios.js", ".android.js", ".js", ".ts", ".tsx", ".json"],
        alias: {
          "@/": "./src"
        }
      }
    ]
  ]
}

{
  "name": "@"
}