Caminhos absolutos para imports no Expo, como fazer?

Evandro Ribeiro — Thu, 14 Nov 2019 22:24:20 +0000

Se você assim como eu usa a pasta src como root da aplicação, sabe que é bem chato importar componentes usando ../../ para isso, fora quando você resolve mover um componente que hora foi criado local, mas por conta de ser reutilizado em outros lugares, decidiu mover ele para uma pasta global, ao fazer isso, o import era quebrar.
A motivação para escrever esse post, veio porque resolvi esse "problema", com algumas configurações no babel.config.js que vem por padrão em qualquer projeto Expo, abaixo descrevo os passos necessários para que você possa configurar o seu projeto, e poder usar poder usar ~/ e ao fazer isso, ele listar as pastas/arquivos na pasta src definindo ela como root no projeto.

Vamos começar instalando o babel-plugin-root-import como uma dependência de desenvolvimento no projeto, abaixo um exemplo de como fazer isso!

yarn add -D babel-plugin-root-import

ou

npm install babel-plugin-root-import --sav-dev

Uma vez instalada a dependência, ~~espero que tenha usado o yarn para isso~~, vamos alterar o babel.config.js, por padrão ele vem assim:

module.exports = function(api) {
  api.cache(false);
  return {
    presets: ['babel-preset-expo'],
  };
};

Mas iremos altera-lo e deixar dessa forma aqui:

module.exports = function(api) {
  api.cache(false);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'babel-plugin-root-import',
        {
          rootPathSuffix: 'src',
        },
      ],
    ],
  };
};

Com isso, incluímos o babel-plugin-root-import e definimos a pasta src, como sendo nosso rootPath. Boa parte já está feita, e para finalizar precisamos configurar o VSCode, para que ele entenda a configuração e passe a usar a pasta src de fato como sendo a raiz do projeto, e para isso, iremos criar na raiz do projeto um arquivo com o nome de jsconfig.json e incluir a configuração que mostro abaixo:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"]
    }
  }
}

E com isso finalizamos todas as configurações necessárias, algo que é relativamente simples, eu concordo.

Se você seguiu todos os passos e não teve nenhum problema, ao importar um componente agora, bastará usar ~/ e o VSCode irá listar todas as pastas e arquivos dentro da src, na imagem abaixo um exemplo:

Considerações finais

Esse é o meu primeiro post, já peço desculpas por algo estranho nele, mas mesmo sendo algo bem simples, achei legal compartilhar e mais importante, pela primeira vez, senti a vontade e confiança para escrever.

DEV Community: Evandro Ribeiro

Caminhos absolutos para imports no Expo, como fazer?

Considerações finais