#3 - Configurando caminhos absolutos no Parcel e TypeScript

Motivação

Caminhos absolutos são bastante úteis. Ao invés de importarmos um módulo com caminhos relativos, primeiro descendo até o diretório raiz do nosso código fonte para então voltar a subir, podemos importar um módulo realizando apenas a subida porque começamos a busca a partir do diretório raiz.

Uma das principais vantagens dos caminhos absolutos em relação a caminhos relativos é a independência da localização do arquivo dentro do projeto; isto é, você pode movê-lo sem precisar editar seu conteúdo.

Como exemplo, vamos imaginar que temos a seguinte estrutura de diretórios:

Nomes comuns para arquivos de projeto 😁

Utilizando um caminho relativo, para importar algo do módulo lib.ts a partir do arquivo fool.ts, eu teria que escrever:

// "desço" até o diretório raiz e volto a "subir"
import { Example } from  "../../../lib/lib";

Já utilizando um caminho absoluto, importar o mesmo módulo fica mais simples:

// parto do diretório raiz
import { Example } from "lib/lib";

O "problema" é que caminhos absolutos não funcionam no TypeScript ou Parcel por padrão.

Caminho absoluto no TypeScript

Para conseguir usar caminhos absolutos no TypeScript, podemos configurar a propriedade baseUrl no arquivotsconfig.json. Com isso, definimos src como o diretório raiz.

// tsconfig.json
{
  ...
  "baseUrl": "./src"
  ...
}

De acordo com a documentação(1) do TypeScript:

Setting baseUrl informs the compiler where to find modules. All module imports with non-relative names are assumed to be relative to the baseUrl.

Caminho absoluto no Parcel

Apesar do Parcel trabalhar muito bem com o TypeScript, ele não usa a propriedade baseUrl do tsconfig.json para resolver o caminho dos módulos. Para que ele consiga encontrar os arquivos, há uma configuração própria através de aliases(2) que é adicionada ao package.json.

// package.json
{
  ...
  "alias": {
    "lib": "./src/lib"
  }
  ...
}

Pronto, agora nosso código import { Example } from "lib/lib"; funciona como deveria. 🙂

  1. https://www.typescriptlang.org/docs/handbook/module-resolution.html#base-url
  2. https://parceljs.org/features/dependency-resolution/#aliases
  3. https://www.typescriptlang.org/tsconfig#baseUrl