23
loading...
🇧🇷 | Import paths personalizados e como isso pode te ajudar
deixando os seus imports mais elegantes e organizados - Parte 01
Se existe uma dor que me incomoda quando estou desenvolvendo uma aplicação com muitos arquivos, é quando esses arquivos importam outros arquivos, e isso provoca um excesso de
../ nos imports desses arquivos.É comum vermos que a medida que a nossa aplicação vai crescendo, as pastas dos arquivos do nosso projeto vão se aninhando cada vez mais dentro de outras pastas, e quando menos esperamos nos deparamos com o seguinte exemplo de import:
import ExampleComponent from '../../../../../../src/components/ExampleComponent/'O exemplo acima é real e é muito mais comum do que imaginamos. Infelizmente o uso excessivo desses
../ traz algumas dores no momento em que precisamos dar manutenção ao nosso código, dentre elas, o retrabalho de consertar o caminho relativo toda vez que precisamos alterar o local de um arquivo importado ou do arquivo importador.Uma das formas mais simples de deixarmos esse import mais elegante e organizado é criando um path personalizado e deixando-o como absoluto. Dessa forma, o exemplo acima poderia ficar assim:
import ExampleComponent from '~/components/ExampleComponent/'No exemplo acima, o prefixo
~ foi configurado como um caminho absoluto de um diretório do nosso projeto, nesse caso o diretório é a pasta src. Dessa forma, não importa em qual pasta o nosso arquivo esteja, quando utilizarmos o prefixo ~/, sempre estaremos importando o path absoluto da pasta src.Bem louco né?!
Antes de tudo, precisaremos instalar e configurar três dependências para que essa mágica funcione. E elas são:
Na raiz do nosso projeto, vamos executar o comando abaixo para personalizarmos as configurações do webpack sem a necessidade de utilizar o
eject e sem a necessidade de criar um fork do react-scripts.yarn add -D react-app-rewired customize-craAgora vamos executar o comando abaixo para importarmos arquivos usando paths personalizados.
yarn add -D babel-plugin-root-importTambém na raiz do nosso projeto, criaremos um arquivo chamado
config-overrides.js. Ele será o responsável por estabelecer a pasta raiz do nosso projeto.Vamos inserir esse código no arquivo:
const { addBabelPlugin, override } = require('customize-cra')
module.exports = override(
addBabelPlugin([
'babel-plugin-root-import',
{
rootPathSuffix: 'src',
},
])
)Ainda na raiz do nosso projeto, criaremos um arquivo chamado
jsconfig.json. Ele será o responsável por fazer com que o VSCODE entenda os paths personalizados.Vamos inserir esse código no arquivo:
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"~/*": ["*"]
}
}
}Por último, atualizaremos os scripts no arquivo
package.json. Deixe-os dessa forma:{
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}
}Como você pode observar, estamos substituindo todos os scripts
react-scripts por react-app-rewired, com exceção do script eject.Agora podemos utilizar qualquer arquivo dentro da nossa pasta
src utilizando o ~/ no momento do import.import ExampleComponent from '~/components/ExampleComponent/'Se quiser ver esse exemplo na prática, você pode dar uma olhadinha no template que eu criei para projetos React aqui:
coderamos
/
template-reactjs
This project contains the basic structure for React projects. It also includes my settings for babel-plugin-root-import, eslint-plugin-import-helpers, prop-types, react-router-dom, styled-components and more...
Lá eu também configurei o ESLint e outras coisas para facilitar a estrutura inicial do seu projeto.
Comenta aí o que você acha dessa abordagem nos nossos imports :)
23