Intégrations

Pré-processeurspermalink

Les pré-processeurs transforment vos fichiers .svelte avant de les passer au compilateur. Par exemple, si votre fichier .svelte utilise TypeScript et PostCSS, il doit d'abord être transformé en Javascript et CSS afin que le compilateur Svelte puisse le traiter. Il existe plusieurs pré-processeurs disponibles. L'équipe Svelte maintient deux pré-processeurs officiels qui sont décrits ci-dessous.

vitePreprocesspermalink

vite-plugin-svelte offre une fonctionnalité vitePreprocess qui utilise Vite comme pré-processeur. Il est capable de gérer les différentes nuances de langages que Vite gère : TypeScript, PostCSS, SCSS, Less, Stylus, et SugarSS. Pour des raisons pratiques, ce pré-processeur est ré-exporté depuis le paquet @sveltejs/kit/vite. Si vous mettez TypeScript en place dans votre projet, il sera inclus par défaut :

ts
// svelte.config.js
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

export default {
  preprocess: [vitePreprocess()]
};

svelte-preprocesspermalink

svelte-preprocess possède des fonctionnalités supplémentaires que vitePreprocess ne propose pas, comme le support de Pug, Babel, et les styles globaux. Cependant vitePreprocess est généralement plus rapide et demande moins de configuration, il est donc utilisé par défaut. Notez que CoffeeScript n'est pas supporté par SvelteKit.

Vous aurez besoin d'installer svelte-preprocess avec npm install --save-dev svelte-preprocess et de l'ajouter à votre fichier svelte.config.js. Après cela, vous aurez probablement besoin d'installer la librairie correspondante avec par exemple npm install -D sass ou npm install -D less.

Adderspermalink

Svelte Adders vous permet de mettre en place différentes intégrations complexes comme Tailwind, PostCSS, Storybook, Firebase, GraphQL, mdsvex, et d'autres en une seule commande. Vous trouverez sur sveltesociety.dev une liste complète des templates, composants, et outils disponibles à l'usage avec Svelte et SvelteKit.

Plugins Vitepermalink

Puisque les projets SvelteKit sont compilés avec Vite, vous pouvez utiliser les plugins Vite pour améliorer votre projet. Vous trouverez sur vitejs/awesome-vite une liste complète des plugins disponibles.

FAQ des intégrationspermalink

La FAQ de SvelteKit a une section Comment utiliser X avec SvelteKit, qui peut vous aider si vous avez encore des questions.