📢 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.
É 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 Github Github.
Ajude sua rede de amigos desenvolvedores a pararem de sofrer com importações relativas compartilhando este artigo!
Um grande abraço e até a próxima!
Oldest comments (6)
Very good all these tips. Thaks!
I'm glad you liked it!
Parabéns, ótimo post!
Ficou feliz que tenha gostado!
Parabéns pelo post
se caso alguém estiver utilizando com Typescript como eu
resir014.xyz/posts/2019/03/13/usin...
justinnoel.dev/2019/06/18/configur...
npmjs.com/package/eslint-import-re...
Show de bola!
Obrigado por compartilhar com os demais!