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.