Carpeta lib personalizada en SvelteKit

Cómo crear un alias de ruta en SvelteKit

Definición de alias de ruta

Si desea cambiar el nombre de la carpeta "lib" definida por SvelteKit de forma predeterminada o agregar cualquier otro directorio para importaciones cortas, debe actualizar dos configuraciones.

  • tsconfig, para que Typescript pueda resolver su alias de importación
  • su svelte-config, que también debe conocer los alias de la ruta

Con estos cambios, cada directorio en "src" se puede resolver a través de alias de ruta, lo que significa que obtiene importaciones breves y simples.

Actualización del archivo tsconfig

En este ejemplo, agregaré un nuevo directorio para importaciones cortas, pero se aplican los mismos cambios si desea reemplazar "lib".

El siguiente código muestra un tsconfig.json actualizado, donde el objeto "paths" se ha mejorado con mi nuevo directorio "msw", que es una abreviatura de "mock service worker". Esta carpeta contiene todo mi código relacionado con MSW.

{
  "compilerOptions": {
    ...
    "paths": {
      "$lib": ["src/lib"],
      "$lib/*": ["src/lib/*"],
      "$msw": ["src/msw"],
      "$msw/*": ["src/msw/*"]
    }
  },
  ...
}

Actualizando la configuración esbelta

Ahora lo que queda es actualizar también la configuración que consume SvelteKit, llamada "svelte.config.js". Simplemente tenemos que actualizar la configuración del objeto "vite". Tenga en cuenta que también debemos proporcionar la carpeta "lib" explícitamente, ya que nuestra personalización anula la predeterminada, lo que significa que la carpeta "lib" ya no sería un alias.

import adapter from "@sveltejs/adapter-auto";
import preprocess from "svelte-preprocess";
import path from "path";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: preprocess(),

  kit: {
    adapter: adapter(),
    vite: {
      resolve: {
        alias: {
          $msw: path.resolve("./src/msw"),
          $lib: path.resolve("./src/lib")
        }
      }
    }
  }
};

export default config;

Conclusión

¡Y eso es! Con estos pequeños cambios, puede usar cualquier carpeta en "src" con alias de ruta para realizar importaciones limpias y simples.