#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:
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. 🙂