Это руководство предназначено для меня в качестве справочного материала при настройке приложений React Native с помощью Typescript. В нем объясняются шаги, необходимые для настройки трех различных способов настройки псевдонимов пути при создании приложения React Native.

Цели:

• Как настроить псевдоним пути для каталоговcomponents/*
• Как настроить псевдоним глобального пути для каталога srcsrc/*
• Как настроить псевдоним глобального пути для каталога src с префиксом@/*

Представьте, что у нас есть следующая голая установка для проекта 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”

Как настроить псевдоним пути для каталогов

Первая цель — настроить проект таким образом, чтобы мы могли использовать абсолютный импорт для определенных каталогов, таких как

import { TextInput } from “components/form”

1. Установите псевдоним пути для машинописного текста

Нам нужно изменить tsconfig.json , чтобы указать Typescript, где он может найти наши модули.

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

Нам также нужно указать React Native, где взять наши файлы, для этого нам нужно настроить Babel.

Установите babel-plugin-module-resolverкак зависимость разработчика

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

Как настроить псевдоним пути для каталога src

Вторая цель — разрешить проекту использовать абсолютный импорт для каталога src :

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

1. Установите псевдоним пути для машинописного текста

Нам нужно настроить tsconfig.json , чтобы включить псевдоним пути для каталога src .

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

Нам также нужно указать React Native, где взять наши файлы, для этой цели нам также нужно добавить сопоставление каталога src с 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"
        }
      }
    ]
  ]
}

Третья цель — разрешить проекту использовать абсолютный импорт для каталога src с префиксом.

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

Обычно я выбираю именно этот вариант, так как он достаточно удобен. Вы можете четко различать относительный импорт, абсолютный импорт и импорт из node_modules .

1. Установите псевдоним пути для машинописного текста

Нам нужно настроить tsconfig.json , чтобы включить псевдоним пути для каталога src .

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

Нам также нужно указать React Native, где взять наши файлы, для этого нам нужно добавить сопоставление каталога src с 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: {
          "@/": "./src"
        }
      }
    ]
  ]
}

{
  "name": "@"
}