Dossier lib personnalisé dans SvelteKit

Définition des alias de chemin

Si vous souhaitez renommer le dossier "lib" défini par SvelteKit par défaut ou ajouter tout autre répertoire pour les importations courtes, vous devez mettre à jour deux configurations.

• tsconfig, afin que Typescript puisse résoudre votre alias d'importation
• votre svelte-config, qui doit également connaître les alias de chemin

Avec ces modifications, chaque répertoire dans "src" peut être résolu via des alias de chemin, ce qui signifie que vous obtenez des importations courtes et simples.

Mise à jour du fichier tsconfig

Dans cet exemple, je vais ajouter un nouveau répertoire pour les importations courtes, mais les mêmes modifications s'appliquent si vous souhaitez remplacer "lib".

Le code suivant montre un tsconfig.json mis à jour, où l'objet "paths" a été amélioré avec mon nouveau répertoire "msw", qui est une abréviation pour "mock service worker". Ce dossier contient tout mon code lié à MSW.

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

Mise à jour de la svelte-config

Il reste maintenant à mettre à jour également la configuration consommée par SvelteKit, nommée "svelte.config.js". Nous devons simplement mettre à jour la configuration de l'objet "vite". Notez que nous devons également fournir explicitement le dossier "lib", car notre personnalisation remplace celle par défaut, ce qui signifie que le dossier "lib" ne serait plus 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;

Conclusion

Et c'est tout! Avec ces petits changements, vous pouvez utiliser n'importe quel dossier dans "src" avec des alias de chemin pour des importations propres et simples.