Diese Anleitung ist als Referenz für mich selbst gedacht, wenn ich React Native-Apps mit Typescript einrichte. Es erklärt die Schritte, die zum Konfigurieren von drei verschiedenen Möglichkeiten zum Konfigurieren von Pfadaliasen beim Erstellen einer React Native-Anwendung erforderlich sind.

Ziele:

• So richten Sie einen Pfad-Alias ​​für Verzeichnisse eincomponents/*
• So richten Sie einen globalen Pfadalias für das src-Verzeichnis einsrc/*
• So richten Sie einen globalen Pfadalias für das src-Verzeichnis mit Präfix ein@/*

Stellen Sie sich vor, wir haben das folgende nackte Setup für ein React Native-Projekt:

/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”

So richten Sie einen Pfad-Alias ​​für Verzeichnisse ein

Das erste Ziel ist es, das Projekt so zu konfigurieren, dass wir absolute Importe für bestimmte Verzeichnisse wie verwenden können

import { TextInput } from “components/form”

1. Legen Sie den Pfad-Alias ​​für Typoskript fest

Wir müssen tsconfig.json ändern , um Typescript mitzuteilen, wo er unsere Module finden kann

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

Wir müssen React Native auch mitteilen, wo unsere Dateien abgelegt werden sollen, zu diesem Zweck müssen wir Babel konfigurieren.

Installieren Sie die babel-plugin-module-resolverals Entwicklerabhängigkeit

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"
        },
      },
    ],
  ],
}

So richten Sie einen Pfad-Alias ​​für das src-Verzeichnis ein

Das zweite Ziel besteht darin, dem Projekt zu ermöglichen, absolute Importe für das src- Verzeichnis zu verwenden :

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

1. Legen Sie den Pfad-Alias ​​für Typoskript fest

Wir müssen die tsconfig.json so anpassen , dass sie einen Pfad-Alias ​​für das src- Verzeichnis enthält

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

Wir müssen React Native auch mitteilen, wo unsere Dateien abgerufen werden sollen. Zu diesem Zweck müssen wir auch eine Zuordnung für das src-Verzeichnis zu Babel hinzufügen.

// 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"
        }
      }
    ]
  ]
}

Das dritte Ziel besteht darin, dem Projekt zu ermöglichen, absolute Importe für das src- Verzeichnis mit einem Präfix zu verwenden .

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

Dies ist die Option, die ich normalerweise wähle, da sie ziemlich praktisch ist. Man kann deutlich relative Importe, absolute Importe und Importe von node_modules unterscheiden .

1. Legen Sie den Pfad-Alias ​​für Typoskript fest

Wir müssen die tsconfig.json so anpassen , dass sie einen Pfad-Alias ​​für das src- Verzeichnis enthält

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

Wir müssen React Native auch mitteilen, wo unsere Dateien abgelegt werden sollen. Zu diesem Zweck müssen wir eine Zuordnung für das src-Verzeichnis zu Babel mit dem verwendeten Präfix hinzufügen.

// 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": "@"
}