DEV Community

loading...
Cover image for Configurando caminhos absolutos no React para Web sem ejetar [pt-BR]

Configurando caminhos absolutos no React para Web sem ejetar [pt-BR]

bybruno profile image Bruno Farias ・4 min read

📢 English Version:
https://dev.to/heybrunoandrade/configuring-absolute-paths-in-react-for-web-without-ejecting-en-us-52h6

Depois de ter feito um artigo mostrando como realizar a configuração de caminhos absolutos no React Native, agora venho mostrar como realizar essa configuração no React para Web.

Enquanto a equipe do React não implementa isso no CRA, vamos configurar com as nossas próprias mãos e sem ejetar. Continue lendo e verá a mágica acontecer.

Uma pequena introdução ☕

Por que não ejetar o projeto?

Bom, o motivo disso é que você estará quebrando as "garantias" do CRA. Mas calma, pego projetos o tempo todo que foram ejetados e eles estão até hoje funcionando perfeitamente em produção, o único problema de ejetar, é que as configurações serão minhas e tenho que dá suporte a elas.

"Coisas podem quebrar" - Dan Abramov

Mas felizmente, utilizando ferramentas como o craco, podemos voltar facilmente para as configurações padrões do CRA caso as coisas deem erradas. E isso é incrível!

Já que vamos mexer somente no alias, você não tem muito com o que se preocupar, o craco irá injetar as novas configurações que fizermos no arquivo craco.config.js dentro das configurações padrões do CRA.

Caso você não saiba, o intuito de configurar caminhos absolutos em um projeto feito com Reactjs, é para facilitar a importação de arquivos. Para isso podemos utilizar um símbolo para representar um diretório root dos nossos códigos. Veja um exemplo abaixo:


Use isto 😍
import Form from '@/components/Form'

E Evite isto 😤
import Form from '../../../../../components/Form'

Enter fullscreen mode Exit fullscreen mode

Dizem que é praticando que se aprende 🏊

☝ Então vamos lá, abra o seu terminal e instale as dependências necessárias:

# yarn
yarn add @craco/craco

# npm
npm i @craco/craco
Enter fullscreen mode Exit fullscreen mode

✌ Após realizar a instalação do craco, precisaremos renomear algumas linhas de comando do package.json.

Substitua o "react-scripts" por "craco".

{
  "scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
}

Enter fullscreen mode Exit fullscreen mode

Isso fará com que os scripts do CRA seja executado pelo craco o qual irá realizar injeções das configurações que estarão no arquivo craco.config.js.

🛠 Crie o arquivo no diretório raiz do projeto chamado: craco.config.js e inclua as configurações abaixo:

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/')
    }
  },
  jest: {
    configure: {
      moduleNameMapper: {
        '^@(.*)$': '<rootDir>/src$1'
      }
    }
  }
};
Enter fullscreen mode Exit fullscreen mode

Uma pitada de VueJS, por favor! 🍲

Estou utilizando o alias "@" para imitar o Vuejs. Você pode utilizar o alias que achar interessante, tais como "~" ou "#", por exemplo.

Meu VSCode não está entendendo nada 😢

Ao fazer isso iremos nos deparar com o primeiro problema, o autocomplete. Já estamos acostumados a ter autocomplete quando vamos importar os arquivos utilizando caminhos relativos.

Esse erro acontece porque o VSCode não entende que o "@" é a pasta "src" do nosso projeto. Para ativarmos o autocomplete precisaremos configurar o VSCode para que ele entenda. E para isso precisaremos criar um arquivo chamado jsconfig.json no diretório raiz do projeto.

Saiba mais sobre o jsconfig.json.

Inclua as seguintes propriedades dentro do arquivo:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}
Enter fullscreen mode Exit fullscreen mode

Incrível!

Agora está funcionando perfeitamente, utilize o comando: npm start para executar o seu projeto.

Uma ferramenta que gosta de reclamar o tempo todo! 😡

Se você estiver utilizando o eslint, irá perceber que ele irá reclamar em todas as importações que você realizar utilizando "@".

Graças a Deus, existe uma forma de acalmar o eslint utilizando o eslint-import-alias.

☝ Primeiramente adicione as bibliotecas abaixo como dependências de desenvolvimento, pelo amor de Deus! 😰

# yarn
yarn add eslint-plugin-import eslint-import-resolver-alias -D

# npm
npm i eslint-plugin-import eslint-import-resolver-alias -D

Enter fullscreen mode Exit fullscreen mode

✌ No seu arquivo .eslintrc.json inclua as seguintes propriedades:

  "settings": {
    "import/resolver": {
      "alias": {
        "map": [["@", "./src"]]
      }
    }
  }

Enter fullscreen mode Exit fullscreen mode

Perguntas que parecem idiotas mas não são 😳💬

Posso utilizar esta técnica em projetos que vão para produção?

Resposta: Sim, você pode utilizar sem problema nenhum!

Posso usar no React Native?

Resposta: Não, a configuração no React Native é diferente, mostro como fazer neste artigo:
Configurando Caminhos absolutos no React Native.

Meus arquivos de testes podem dar erro?

Resposta: Se você tiver seguido corretamente o passo a passo, provavelmente não. Se você mudou o símbolo que vai utilizar como alias, certifique-se de que tenha colocado isso também na configuração do jest lá no arquivo craco.config.js na propriedade moduleNameMapper.

Por que não está utilizando o Babel plugin root import?

Resposta: Diferentemente do Babel plugin root import, importamos somente uma biblioteca que resolve o problema, além de ser simples de utilizar. Outra coisa que andou me incomodando é que não está dando suporte ao CRA 3.0, por isso a utilização do Craco.

Imagine se tudo na vida funcionasse perfeitamente 🦄

Assim como qualquer lib, é possível que se encontre bugs no @craco, caso encontre por favor abra uma issue no projeto oficial para que a comunidade melhore a biblioteca e torne-a funcional para todos.

Mas calma, use-a sem medo para realização desse tutorial.

É hora de dar tchau 😩

Estava gostando tanto de passar esse tempo com você 😢. Caso queira saber o que ando aprontando por ai, me siga no Twitter @heybrunoandrade.

Ajude sua rede de amigos desenvolvedores a pararem de sofrer com importações relativas compartilhando este artigo!

Me ajude realizar correções ou traduzir este artigo para outros idiomas.
Acessar Repositório.

Um grande abraço e até a próxima!

Discussion

pic
Editor guide
Collapse
juniorstreichan profile image
Collapse
bybruno profile image
Bruno Farias Author

Show de bola!
Obrigado por compartilhar com os demais!

Collapse
rogeriomq profile image
Rogério Milhomens de Queiroz

Very good all these tips. Thaks!

Collapse
bybruno profile image
Bruno Farias Author

I'm glad you liked it!

Collapse
leandrosimoes profile image
Leandro Simões

Parabéns, ótimo post!

Collapse
bybruno profile image
Bruno Farias Author

Ficou feliz que tenha gostado!