Все мы хотя бы раз в жизни видели такое важное заявление.

import SomeOtherComponent from '../../../SomeOtherPath/index.js

Чем сложнее становится ваш проект, тем больше «../../../» вам нужно будет использовать в своих путях. Чтобы решить эту проблему, мы можем использовать псевдонимы путей. Псевдонимы путей позволяют нам назначать имя псевдонима для путей и использовать имя псевдонима везде, где мы хотим. После того, как вы настроите псевдоним, вам не нужно будет проверять, сколько каталогов вам нужно перемещаться вверх и вниз при импорте файлов.

Сначала нам нужно установить пакет metro-react-native-babel-preset.

Для npm:

npm i metro-react-native-babel-preset

Для пряжи:

yarn add -D metro-react-native-babel-preset

Для Android убедитесь, что вы собрали его заново. Для iOS вы должны установить pod.

Теперь мы готовы объявить псевдонимы наших путей.

Создайте файл .babelrc в корневом каталоге вашего проекта. (Вы можете переименовать свой .babelrc.js в .babelrc, если он у вас уже есть)

Давайте создадим три разных псевдонима путей со структурой, приведенной ниже.

 ALIAS NAME    ALIAS PATH
@navigation   ./src/navigation
@components   ./src/components
@assets       ./assets

Вставьте приведенный ниже код в файл .babelrc. (Если у вас разные конфигурации, убедитесь, что вы их не потеряете. Просто добавьте дополнительные детали.)

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

Теперь мы можем начать использовать наш псевдоним для импорта файлов.
Например, вы можете импортировать ./src/components/SomeComponent.js вот так

import SomeComponent from '@components/SomeComponent.js';

Неважно, откуда вы его импортируете. Вы можете импортировать его в любом месте вашего проекта.

Чтобы разрешить эти пути, нам нужно выполнить дополнительную настройку нашего кода VS. Таким образом, мы можем CMD + Click или CTRL + Click указать путь и напрямую перейти к этому файлу.

Создайте файл jsconfig.json в корне вашего проекта. Вставьте приведенный ниже код.

(Возможно, потребуется перезапустить код VS)

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@navigation/*": ["./src/navigation/*"],
      "@components/*": ["./src/components/*"],
      "@assets/*": ["./assets/*"],
    }
  },
  "exclude": ["node_modules", "dist"]
}

Теперь вы готовы писать код, не беспокоясь о сложных путях!

Если вы найдете эту историю полезной, подпишитесь на MTA TEAM на linkedin.

Кроме того, вы можете задать вопросы членам нашей команды.

Али Гюмюш Тосун - Семих Севинчли - Асланкан Йылмаз - Бурак Арыджы