Bruno A.

Posted on Jul 21, 2019 Edited on Oct 30, 2023

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

#webpack #webdev #react #javascript

📢 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'

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

✌ 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",
}

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'
      }
    }
  }
};

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/*"]
}

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

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

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

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.