Configurando caminhos absolutos no React Native [pt-BR]

📢 English Version:
https://dev.to/heybrunoandrade/configuring-absolute-paths-in-react-native-en-us-2m5k

Uma das coisas que sinto falta no React/React Native são os caminhos absolutos. É muito comum usarmos caminhos relativos para realizar importações de arquivos.

O problema é quando o projeto cresce e as pastas ficam profundamente aninhadas, acredito que você já possa ter visto ou já fez isso:

../../../.../../../../Utils/Breadcrumbs.js

../../../../../Components/Form/TextField.js

Agora imagine que a pasta Utils mudou de diretório. 😢

Para resolvermos esse problema, utilize uma biblioteca chamada Babel Plugin Root Import. Com essa biblioteca podemos utilizar caracteres coringas para apontar o diretório root de nossa aplicação, que geralmente é a pasta “src”. 😍

É praticando que se aprende

☝ Adicione a biblioteca em seu projeto.

    babylu@Project: ~$ yarn add babel-plugin-root-import -D

    ou

    babylu@Project: ~$  npm install babel-plugin-root-import -D

✌ Após a instalação, configure o arquivo babel.config.js que está localizado no diretório raiz.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'babel-plugin-root-import',
      {
        rootPathPrefix: '@',
        rootPathSuffix: 'src'
      }
    ]
  ],
  env: {
    production: {
      plugins: [
        'babel-plugin-root-import',
        {
          rootPathPrefix: '@',
          rootPathSuffix: 'src'
        }
      ]
    }
  }
};

Com tudo configurado, já é possível realizar as importações dos seus arquivos utilizando “@” como prefixo. Segue um exemplo abaixo:

@/Components/Form

@/Pages/Auth/SignIn

Uma pitada de VueJS por favor 🍲

Estou utilizando o “@” para imitar o Vuejs. Utilize o prefixo que você achar interessante. Pode ser o ‘~’ ou ‘#’ por exemplo.

Com licença, você poderia me mostrar o Caminho? 🚶

Utilizando esta técnica teremos o nosso primeiro problema, a ausência do autocomplete. Isso acontece porque o VSCode ainda não entende que o “@” faz referência a pasta “src” do nosso projeto. Para resolver isso vamos criar no diretório raiz um arquivo de configuração que o VSCode entende, chamado de jsconfig.json.

Dentro dele inclua as configurações abaixo:

{
  "compilerOptions": {
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules"]
}

Saiba mais sobre o arquivo jsconfig.json:

https://code.visualstudio.com/docs/languages/jsconfig

Agora sim! 😎

Uma ferramenta que gosta de reclamar! 😡

Caso esteja utilizando o eslint em seu projeto, irá receber muitas reclamações das importações que você faz utilizando o prefixo ‘@’.

Felizmente, existe uma biblioteca que serve para avisarmos ao eslint que está tudo certo.

Adicione:

    babylu@Project: ~$ yarn add eslint-import-resolver-babel-plugin-root-import -D

    ou

    babylu@Project: ~$ npm install eslint-import-resolver-babel-plugin-root-import -D

No arquivo de configuração do eslint inclua as seguintes propriedades.

  "settings": {
    "import/resolver": {
      "babel-plugin-root-import": {}
    }
  }

Perguntas que parecem idiotas mas não são 🤔

Posso usar isso para aplicativos que vão para produção?

R: Sim, se você tiver seguido corretamente os passos verá que configuramos para produção no babel.config.js

Posso usar no React para web?

R: Para utilizar o babel plugin root import para Web é necessário realizar algumas outras configurações.

Mas nem tudo na vida são flores 🔴

É possível que se encontre bugs na biblioteca. Caso você encontre por favor relate no repositório oficial do babel plugin root import e ajude a comunidade a criar uma biblioteca melhor.

https://github.com/entwicklerstube/babel-plugin-root-import/issues

Me siga no Twitter @heybrunoandrade

Me ajude a traduzir esse artigo para outros idiomas.
Acessar Repositório

Comments

[Jairo Júnior]

Olá, precisei colocar um [] a mais na opção do ENV de production ali, a propósito, qual o objetivo dessa opção ENV ? Valeu, parabéns pelo post!

  env: {

    production: {
      plugins: [
        [
          'babel-plugin-root-import',
          {
            rootPathPrefix: '~',
            rootPathSuffix: 'src'
          }
        ]
      ]
    }
  }

[Leandro Simões]

Ótimo artigo, só um ponto que tive que mudar:

tive que colocar meu no meu .eslintrc desta forma:

"settings": {
  "import/resolver": {
    "babel-plugin-root-import": {
      "rootPathPrefix": "@",
      "rootPathSuffix": "src"
    }
  }
}

além também de colocar lá no babel.config.js, se não o eslint continuava mostrando o erro de import/no-unresolved não sei pq.

[Marcus Vinicius]

Olá, funciona também no expo?

[Bruno A.]

Fala Marcus, tudo bem?
Essa é uma ótima pergunta, infelizmente não sei lhe responder, nunca utilizei o expo :c. É necessário testar tanto em ambiente de desenvolvimento como em produção. Caso você tenha curiosidade, por favor me dê um retorno se está a funcionar ou não :D

[Rogério Milhomens de Queiroz]

Perfect article!