đą English Version:
https://dev.to/heybrunoandrade/configuring-absolute-paths-in-react-native-en-us-2m5k
Uma das coisas que sinto falta no React/React Native são os caminhos absolutos. à muito comum usarmos caminhos relativos para realizar importaçÔes de arquivos.
O problema Ă© quando o projeto cresce e as pastas ficam profundamente aninhadas, acredito que vocĂȘ jĂĄ possa ter visto ou jĂĄ fez isso:
../../../.../../../../Utils/Breadcrumbs.js
../../../../../Components/Form/TextField.js
Agora imagine que a pasta Utils mudou de diretĂłrio. đą
Para resolvermos esse problema, utilize uma biblioteca chamada Babel Plugin Root Import. Com essa biblioteca podemos utilizar caracteres coringas para apontar o diretĂłrio root de nossa aplicação, que geralmente Ă© a pasta âsrcâ. đ
Ă praticando que se aprende
â Adicione a biblioteca em seu projeto.
babylu@Project: ~$ yarn add babel-plugin-root-import -D
ou
babylu@Project: ~$ npm install babel-plugin-root-import -D
â ApĂłs a instalação, configure o arquivo babel.config.js que estĂĄ localizado no diretĂłrio raiz.
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'babel-plugin-root-import',
{
rootPathPrefix: '@',
rootPathSuffix: 'src'
}
]
],
env: {
production: {
plugins: [
'babel-plugin-root-import',
{
rootPathPrefix: '@',
rootPathSuffix: 'src'
}
]
}
}
};
Com tudo configurado, jĂĄ Ă© possĂvel realizar as importaçÔes dos seus arquivos utilizando â@â como prefixo. Segue um exemplo abaixo:
@/Components/Form
@/Pages/Auth/SignIn
Uma pitada de VueJS por favor đČ
Estou utilizando o â@â para imitar o Vuejs. Utilize o prefixo que vocĂȘ achar interessante. Pode ser o â~â ou â#â por exemplo.
Com licença, vocĂȘ poderia me mostrar o Caminho? đ¶
Utilizando esta tĂ©cnica teremos o nosso primeiro problema, a ausĂȘncia do autocomplete. Isso acontece porque o VSCode ainda nĂŁo entende que o â@â faz referĂȘncia a pasta âsrcâ do nosso projeto. Para resolver isso vamos criar no diretĂłrio raiz um arquivo de configuração que o VSCode entende, chamado de jsconfig.json.
Dentro dele inclua as configuraçÔes abaixo:
{
"compilerOptions": {
"target": "es6",
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules"]
}
Saiba mais sobre o arquivo jsconfig.json:
https://code.visualstudio.com/docs/languages/jsconfig
Agora sim! đ
Uma ferramenta que gosta de reclamar! đĄ
Caso esteja utilizando o eslint em seu projeto, irĂĄ receber muitas reclamaçÔes das importaçÔes que vocĂȘ faz utilizando o prefixo â@â.
Felizmente, existe uma biblioteca que serve para avisarmos ao eslint que estĂĄ tudo certo.
Adicione:
babylu@Project: ~$ yarn add eslint-import-resolver-babel-plugin-root-import -D
ou
babylu@Project: ~$ npm install eslint-import-resolver-babel-plugin-root-import -D
No arquivo de configuração do eslint inclua as seguintes propriedades.
"settings": {
"import/resolver": {
"babel-plugin-root-import": {}
}
}
Perguntas que parecem idiotas mas nĂŁo sĂŁo đ€
Posso usar isso para aplicativos que vão para produção?
R: Sim, se vocĂȘ tiver seguido corretamente os passos verĂĄ que configuramos para produção no babel.config.js
Posso usar no React para web?
R: Para utilizar o babel plugin root import para Web é necessårio realizar algumas outras configuraçÔes.
Mas nem tudo na vida sĂŁo flores đŽ
Ă possĂvel que se encontre bugs na biblioteca. Caso vocĂȘ encontre por favor relate no repositĂłrio oficial do babel plugin root import e ajude a comunidade a criar uma biblioteca melhor.
https://github.com/entwicklerstube/babel-plugin-root-import/issues
Me siga no Twitter @heybrunoandrade
Me ajude a traduzir esse artigo para outros idiomas.
Acessar RepositĂłrio
Top comments (5)
Olå, precisei colocar um [] a mais na opção do ENV de production ali, a propósito, qual o objetivo dessa opção ENV ? Valeu, parabéns pelo post!
Ătimo artigo, sĂł um ponto que tive que mudar:
tive que colocar meu no meu .eslintrc desta forma:
além também de colocar lå no
babel.config.js
, se nĂŁo o eslint continuava mostrando o erro deimport/no-unresolved
não sei pq.Olå, funciona também no expo?
Fala Marcus, tudo bem?
Essa Ă© uma Ăłtima pergunta, infelizmente nĂŁo sei lhe responder, nunca utilizei o expo :c. Ă necessĂĄrio testar tanto em ambiente de desenvolvimento como em produção. Caso vocĂȘ tenha curiosidade, por favor me dĂȘ um retorno se estĂĄ a funcionar ou nĂŁo :D
Perfect article!