Как настроить Expo, чтобы разрешить глобальный импорт модулей?

Question

Я ищу способ избавиться от этих

import { get_records } from ../../../../store/actions/async';

Если честно, я перепробовал много хитростей:

• Используя package.json в src/ с {"name": "@app"} и пытаясь использовать:

  import { get_records } from '@app/store/actions/async';
  

• Использование имени React Native AppRegistry:

   import { get_records } from 'main/src/store/actions/async';
  

Те же вопросы относятся к активам.

Я видел решение с Webpack и Babel, но я не использую их с React Native.

Как вам это удается?

Answer 1

На самом деле я использовал Бабель, не замечая этого.

npm install --save-dev babel-plugin-module-resolver
npm install --save-dev eslint-import-resolver-babel-module

.babelrc

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  },
  "plugins": [
    ["module-resolver", {
      "alias": {
        "~mobile": "./src",
        "~assets": "./assets"
      }
    }]
  ]
}

.eslintrc

{
    "settings": {
      "import/resolver": {
        "babel-module": {
          "alias": {
            "~mobile": "./src",
            "~assets": "./assets"
          }
        }
      }
    }
}

Тогда я использую это так:

import { addToFavorite, removeFromFavorite } from '~mobile/store/actions';

await Font.loadAsync({
  'cabin-reg': require('~assets/fonts/Cabin/Cabin-Regular.ttf'),
  'league-spartan': require('~assets/fonts/LeagueSpartan/leaguespartan-bold.ttf')
 })

Answer 2

Если вы используете Expo, вы должны использовать babel, потому что поставляются только версии библиотек ES6. Даже проекты, созданные с react-native init, поставляются с babel по умолчанию. Проверьте папку вашего проекта, она должна иметь файл .babelrc.

Затем вы можете использовать babel-plugin-root-import :

import { get_records } from '~/store/actions/async';

.babelrc:

{
  "presets": ["babel-preset-expo"],
  "plugins": [
    [
      "babel-plugin-root-import",
      {
        "rootPathSuffix": "src"
      }
    ]
  ]
}