Все мы хотя бы раз в жизни видели такое важное заявление.
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.
Кроме того, вы можете задать вопросы членам нашей команды.
Али Гюмюш Тосун - Семих Севинчли - Асланкан Йылмаз - Бурак Арыджы