Root import vs Webpack alias

O que é Root import?

Image um cenário onde você precise importar um componente ou algum método mas o mesmo se encontra em um nível de diretório distante do arquivo atual. Você precisaria fazer algo semelhante a isso:

import Foo from '../../../Foo'

Veja que foi necessário retornar três diretórios até encontrar o arquivo necessário, e isso pode variar para mais ou para menos dependendo da localização do arquivo atual.

O root import permite você configurar seu projeto para trabalhar a partir de um único caminho relativo, que é configurado utilizando a biblioteca babel-plugin-root-import. Uma vez configurado você pode deixar de retornar diretórios e importá-los através do simbolo configurado, por exemplo, ao invés de usar da maneira citada anteriormente, teríamos isso:

import Foo from '~/components/Foo'

Bem melhor, não? Mas, essa não é a única alternativa para solucionar esse “problema”.

---

Webpack alias

Antes de falar sobre o webpack alias, vamos falar do webpack em si.

O webpack é o empacotador utilizado por padrão no ReactJS, farei um post em breve explicando mais sobre ele, seu funcionamento e como construir um do zero, mas por hora saiba que ao criar um projeto com o comando create-react-app o webpack é inserido em seu projeto internamente.

Contudo, não é possível modificar as configurações do webpack “nativamente”, para isso você pode ejetar sua aplicação (falarei disso em breve também), ou então instalar a biblioteca Craco que irá permitir modificar o webpack sem que você precise ejetar seu projeto.

Então vamos lá, mãos na massa! Tudo o que você precisa fazer é instalar a biblioteca citada acima e então configurá-la da seguinte maneira:

const path = require('path')

module.exports = {
  webpack: {
    alias: {
      '@Root': path.resolve(__dirname, 'src/'),
      '@Page': path.resolve(__dirname, 'src/pages/'),
      '@Component': path.resolve(__dirname, 'src/_components/'),
    },
  },
}

Pronto, agora para importar um componente seguindo o primeiro exemplo, basta fazer assim:

import Foo from '@Component/Foo'

Ah, e para seu editor reconhecer essa nova forma de importação e fornecer o autocomplete, basta seguir os passos abaixo:

Criar ou acrescentar no arquivo jsconfig.json(ou caso use Typescript tsconfig.json) na raíz do projeto com o seguinte conteúdo: jsconfig.json

{
  "compilerOptions": {
    // ...
    "baseUrl": "./src/",
    "paths": {
      "@Root/*": ["*"],
      "@Page/*": ["pages/*"],
      "@Component/*": ["_components/*"]
    }
    // ...
  }
}

Você pode criar quantos aliases quiser, dando nomes específicos que lhe ajudem identificar a origem da importação.

OBS: É possível usar a biblioteca babel-plugin-root-import de forma semelhante ao webpack alias, dando nome para cada “atalho”, para isso basta seguir estas instruções.