Как включить jsconfig.json в реактивном проекте

Я создаю новый реактивный проект и хочу настроить приложение для поддержки импорта модулей с использованием абсолютных путей, добавив файл jsconfig.json в корень моего проекта. Но приложение не может разрешить модули. Нужно ли мне делать какие-то дополнительные настройки?

Я создал новый проект React-Native Project с react-native-cli 2.0.1 со следующей структурой и пытаюсь импортировать MyButton в App.js следующим образом: `import MyButton from '~/components/MyButton';``

|-- android
|-- ios
|-- node_modules
|-- src
    |-- components
        |-- MyButton.js
    |-- App.js
|-- .eslintrc.js
|-- .flowconfig
|-- .watchmanconfig
|-- app.json
|-- babel.config.json
|-- index.js
|-- jsconfig.json
|-- metro.config.js
|-- package.json

jsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"]
    }
  }
}

пакет.json

{
  "name": "TestApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.8.6",
    "react-native": "0.60.3"
  },
  "devDependencies": {
    "@babel/core": "^7.5.4",
    "@babel/runtime": "^7.5.4",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.8.0",
    "eslint": "^6.0.1",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.55.0",
    "react-test-renderer": "16.8.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

Я ожидаю, что приложение сможет разрешить модуль, но получаю сообщение об ошибке:

`Error: Unable to resolve module `~/components/MyButton` from `/TestApp/src/App.js`: Module `~/components/MyButton` does not exist in the Haste module map

javascript react-native

15.07.2019 13:59

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

7 358

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы должны использовать Babel-плагин-модуль-преобразователь.

Пример конфигурации babel.config.js:

module.exports = {
  ...other config

  plugins: [
    ['module-resolver', {
      root: [
        './src',
      ],
      "alias": {
        "~": "./src",
      }
    }],
  ],
};

React Native по умолчанию не поддерживает разрешение модулей из jsconfig.json.

Спасибо за ваш комментарий. Я попробовал вашу конфигурацию и столкнулся с новой проблемой. Я установил root на '.' потому что мой index.js с реестром приложений не находится в папке src. Тем не менее я получил ошибку Application has not been registred. Ты хоть представляешь, в чем моя ошибка?

— 15.07.2019 16:14

Нет, работает... Спасибо за помощь!

— 15.07.2019 16:52

15.07.2019 14:38

Альтернативный способ: