Como criar um alias para importar componentes no Svelte sem usar caminhos relativos

Se você está usando um projeto Laravel 8 com Webpack.mix e Svelte, deve estar acostumado a importar componentes usando os caminhos relativos. Isso pode ser um problema, caso queira reorganizar os diretórios do seu projeto.

Neste artigo vamos aprender a criar um alias para definir dinamicamente o caminho das suas importações de componentes.

Para quem este tutorial é aplicado?

Se você está usando um projeto Laravel com ou sem Inertiajs para Svelte
Se você está usando Laravel Mix (usado nas versões 8 e anteriores do Laravel).

O que irá mudar?

Este procedimento permite que ao invés de importar os componentes assim:

import Component from "../../../../components/Component.svelte"

...você consiga importar assim:

import Component from "$svelte/components/Component.svelte"

Para isso criaremos o alias $svelte. O alias é uma variável global, que pode ser chamada em qualquer arquivo do seu projeto. Ele sempre apontará a partir da raiz definida. Desta forma, suas importações ficarão mais organizadas. Este alias é semelhante ao $lib do Sveltekit.

No webpack.mix.js

Configure o webpack para resolver o alias que será criado.

.mix.webpackConfig({
  resolve: {
    alias: {
      $svelte: path.resolve(__dirname, 'resources/svelte'),
    }
  }}

No tsconfig.js

Configure o typescript (mesmo que você use o js) para interpretar o alias.

{
    "compilerOptions": {
      "target": "es6",
      "module": "esnext",
      "strict": true,
      "esModuleInterop": true,
      "skipLibCheck": true,
      "forceConsistentCasingInFileNames": true,
      "baseUrl": ".",
      "paths": {
        "$svelte/*": [
            "resources/svelte/*"
        ]
      }
    },
    "exclude": [
        "node_modules",
        "public"
    ]
  }

No jsconfig.json

Configure o javascript para interpretar seu alias.

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "$svelte/*": ["resources/svelte/*"]
        }
    },
    "exclude": [
        "node_modules",
        "public"
    ]
}

Conclusão

Observe que, tanto no jsconfig quanto tsconfig é necessário excluir os diretórios "node_modules" e "public" para que ele não indexe os arquivos destas pastas.

Feito isso, reinicie seu VS Code e aguarde a indexação terminar. Agora é possível navegar utilizando o alias.

Voltar