📢 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!
Top comments (6)
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!
Very good all these tips. Thaks!
I'm glad you liked it!
Parabéns, ótimo post!
Ficou feliz que tenha gostado!