Quando desenvolvemos com frameworks e bibliotecas Javascript para criação de interfaces front-end, nos deparamos constantemente com importações entre arquivos. O Path Mapping pode auxiliar neste processo. Por isso, neste artigo, vamos falar sobre o que é esse recurso e como utilizá-lo.

Conforme nossa aplicação vai crescendo e se tornando mais complexa, essas importações vão ficando cada vez maiores e complexas, com muitos níveis de retorno e torna-se fácil se perder entre essas importações.

Além disso, caso algum arquivo mude de local, todas as importações daquele arquivo deverão ser modificadas, trazendo um trabalho significativo ao programador. A seguir, temos um exemplo de uma importação padrão:

Nesse contexto, podemos utilizar uma configuração no nosso projeto para pré-definir essas rotas de importações, tornando-as mais fáceis de utilizar e muito mais manuteníveis.

Essa configuração é chamada de Path Mapping (mapeamento de caminho), onde utilizamos atalhos nos caminhos dos diretórios para facilitar sua localização.

Então, vamos iniciar o passo a passo de como configurá-lo em um projeto React, com Typescript, criado por meio do create-react-app.

Primeiro passo

Atualize sua árvore do git. Para que tudo seja executado corretamente, é necessário que tudo esteja atualizado no seu git.

Em seguida, iremos utilizar o seguinte comando no terminal: yarn eject (caso esteja usando npm, utilize npm run eject). Esse comando fará com que as configurações do webpack, que antes estavam debaixo dos panos, sejam acessíveis e editáveis.

Assim, irá aparecer uma mensagem de confirmação, pois ejetar o webpack é uma ação que não se pode voltar atrás. Caso você não esteja seguro de continuar, recomendo que leia este artigo até o final antes de desistir do Path Mapping, pois, no decorrer do texto, iremos ver outras formas de fazê-lo. Se tiver certeza e quiser continuar, você pode digitar “y” e apertar enter.

Mas o que é o webpack?

Webpack nada mais é do que um empacotador de código. Com o React, trabalhamos muito com módulos, arquivos de códigos separados e o webpack une tudo em um único arquivo para otimizar nossa aplicação.

Com isso, vamos precisar configurar nosso webpack para que ele entenda nosso Path Mapping e consiga realizar seu trabalho no final.

Segundo passo

Agora que temos nosso webpack acessível, vamos configurá-lo.

Note que temos uma nova pasta em nosso projeto chamada .config. É nela que iremos fazer nossas modificações.

Dentro dessa pasta, abra o arquivo webpack.config.js e busque pela palavra “alias”, utilizando o atalho ctrl + F do teclado (será a segunda opção na busca). Aqui temos as configurações de alias (pseudônimo). Ou seja, é aqui que vamos dizer ao nosso webpack onde estará cada pasta que quisermos.

Vamos colocar nossa pasta de components primeiro. Com isso, dentro dessa configuração de alias, logo no início, vamos colocar o seguinte:

Note que, antes da palavra dirname, temos dois underlines. Assim, nossas alterações ficaram da seguinte forma:

O que fizemos aqui foi dizer ao webpack que, toda vez que usarmos nas importações o @components, estamos na verdade querendo que ele acesse a pasta “../src/components”.

Lembre-se, estamos na pasta .config, logo o comando anterior nos diz para sairmos dessa pasta, acessarmos a pasta src e depois a pasta components. Esse caminho pode mudar dependo de onde a pasta que você deseja colocar no alias esteja e o nome do alias é você que escolhe! Faça novos alias com as principais pastas do seu projeto.

Terceiro passo

Nosso webpack está configurado e, caso nosso projeto não tivesse Typescript, já estaria tudo pronto para usarmos nosso Path Mapping.

Porém, com o Typescript, precisamos configurar nossos alias também no arquivo tsconfig.json, para que o Typescript entenda os caminhos para as nossas pastas por meio do Path Mapping e não apresente erros.

Dessa forma, logo após as configurações de lib e dentro de compilerOptions, no nosso arquivo tsconfig.json, iremos acrescentar as seguintes configurações:

Primeiro, estamos dizendo ao nosso Typescript que o diretório base do nosso projeto é onde nosso arquivo tsconfig está. Depois, nas configurações de path, dizemos ao nosso Typescript que, quando utilizarmos @components seguido de algum arquivo ou pasta, estamos na verdade acessando os arquivos ou pastas seguindo o caminho que especificamos. Lembre-se de que esse caminho pode mudar de acordo com sua organização de diretórios.

Pronto, nosso Typescript e nosso webpack agora irão entender nosso Path Mapping corretamente. Assim, inicie seu projeto com o comando yarn start e, caso ele já esteja rodando, reinicie-o para que todas as configurações funcionem corretamente.

Para utilizar nosso Path Mapping, basta utilizarmos o path que definimos, tanto no Typescript como no Webpack, no nosso exemplo: @components, como na imagem a seguir.

Estude também: Plop.js

Conclusão

Com o Path Mapping, podemos facilitar o nosso desenvolvimento com React e evitar problemas com importações à medida que nossa aplicação escala. É muito recomendado que o Path Mapping seja configurado logo no começo do projeto. Entretanto, ele também pode ser feito posteriormente. O importante é que ele esteja presente para auxiliar e facilitar o desenvolvimento.

A mapeação de caminhos também pode ser feita sem a ejeção do webpack, por meio de bibliotecas como react-app-rewired e react-app-rewired-alias. A escolha de como o Path Mapping será feito vai depender da escolha do time de desenvolvimento, analisando qual cenário será o melhor para o projeto e para o time.

Caso queira explorar um projeto de referência para visualizar melhor as configurações e utilizações do Path Mapping, deixo aqui um repositório de um projeto desenvolvido por mim na Incubadora Javascript da Luby: https://github.com/Ives-Gomes/exotic-cars.

Autor: Ives Moreira.