¿Cómo usar Babel Module Resolver con react-native+expo en la publicación?

El paso a paso o código que hallarás en este artículo es la solución más rápida y válida que hallamos a esta inquietud o problema.

Solución:

Finalmente, .babelrc funciona en este formato:

  "presets": ["babel-preset-expo"],
  "plugins": [
    [
      "module-resolver",
      
        "root": ["./"],
        "alias": 
          "@components": "./src/components",
          "@screens": "./src/screens",
          "@stores": "./src/stores",
          "@utils": "./src/utils",
          "@services": "./src/services",
          "@assets": "./assets",
          "@constants": "./src/constants"
        
      ,
    ],
  ],

Y agregue ‘@’ cuando importe:

import stores from '@stores';

Si eres como yo, sigues experimentando problemas incluso con @ carácter frente a tus caminos,

por favor, considere usar babel-plugin-root-import – una alternativa a babel-plugin-module-resolver,

que no es tan rico en funciones como babel-plugin-module-resolver,

pero es capaz de resolver el problema esencial: demasiados puntos en caminos como este

import Button from '../../../../components/Button;

Esa era la principal preocupación para mí.

Aquí está mi configuración (babel.config.js):

module.exports = function(api) 
  api.cache(true);

  const rootImportOpts = 
    paths: [
      
        root: __dirname,
        rootPathPrefix: '~/',
        rootPathSuffix: 'src',
      ,
      
        root: __dirname,
        rootPathPrefix: '#/',
        rootPathSuffix: 'spec',
      
    ]
  ;

  return 
    presets: ['babel-preset-expo'],
    plugins: [['babel-plugin-root-import', rootImportOpts]]
  ;
;

Y la estructura de carpetas:

expo-app/
  ...
  spec/
  src/
    ...
    components/
    ...
  ...
  app.config.js
  babel.config.js

Como resultado, en lugar de esto:

import Button from '../../../../components/Button;

Yo uso eso:

import Button from '~/components/Button;

Además, funciona como se esperaba en la publicación.

Si estás contento con lo expuesto, puedes dejar un enunciado acerca de qué le añadirías a este tutorial.

---

---

Utiliza Nuestro Buscador