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.
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'
☝ 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'
}
}
}
};
Estou utilizando o alias "@" para imitar o Vuejs. Você pode utilizar o alias que achar interessante, tais como "~" ou "#", por exemplo.
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.
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"]]
}
}
}
Resposta: Sim, você pode utilizar sem problema nenhum!
Resposta: Não, a configuração no React Native é diferente, mostro como fazer neste artigo: Configurando Caminhos absolutos no React Native.
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.
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.
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.
Estava gostando tando 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!