Structure d’un projet
Un projet SvelteKit typique ressemble à ça :
my-project/
├ src/
│ ├ lib/
│ │ ├ server/
│ │ │ └ [your server-only lib files]
│ │ └ [your lib files]
│ ├ params/
│ │ └ [your param matchers]
│ ├ routes/
│ │ └ [your routes]
│ ├ app.html
│ ├ error.html
│ ├ hooks.client.js
│ ├ hooks.server.js
│ └ service-worker.js
├ static/
│ └ [your static assets]
├ tests/
│ └ [your tests]
├ package.json
├ svelte.config.js
├ tsconfig.json
└ vite.config.js
Vous trouverez également des fichiers classiques comme .gitignore
et .npmrc
(et .prettierrc et eslint.config.js
et ainsi de suite, si vous choisissez ces options après avoir lancé npx sv create
).
Fichiers d’un projet
src
Le dossier src
contient le coeur de votre projet. Tout y est optionnel à l’exception de
src/routes
et src/app.html
.
lib
contient votre code de “librairie” (utilitaires et composants), qui peut être importé via l’alias$lib
, ou empaqueté pour distribution en utilisantsvelte-package
server
contient votre code de “librairie” dédié serveur. Il peut être importé en utilisant l’alias$lib/server
. SvelteKit vous empêchera d’importer du code provenant de ce dossier dans du code client
params
contient tout matcher de paramètre dont votre application a besoinroutes
contient les routes de votre application. Vous pouvez aussi y placer des composants qui ne seraient utilisés que pour une route spécifiqueapp.html
est votre template de page — un document HTML contenant les placeholders suivants :%sveltekit.head%
— les éléments<link>
et<script>
nécessaires à votre application, plus tout contenu défini par<svelte:head>
%sveltekit.body%
— le markup pour une page rendue. Ce placeholder devrait vivre dans une<div>
ou dans un autre élément, plutôt que directement dans le<body>
afin d’éviter des bugs causés par d’éventuelles extensions navigateur injectant des éléments qui seraient ensuite détruits lors du processus d’hydratation. SvelteKit vous préviendra lors du développement si ce n’est pas le cas%sveltekit.assets%
— soitpaths.assets
, si précisé, soit un chemin relatif àpaths.base
%sveltekit.nonce
— une règle CSP nonce pour les liens et scripts manuellement inclus, s’il y en a%sveltekit.env.[NAME]%
— ceci sera remplacé au moment du rendu par la variable d’environnement[NAME]
, dont le nom doit être préfixé parpublicPrefix
(en généralPUBLIC_
). Ce placeholder sera remplacé par''
si aucune variable d’environnement ne correspond
error.html
est la page qui est affichée lorsque tout le reste s’est effondré. Elle peut contenir les placeholders suivants :%sveltekit.status%
— le status HTTP%sveltekit.error.message%
— le message d’erreur
hooks.client.js
contient vos hooks clienthooks.server.js
contient vos hooks serveurservice-worker.js
contient votre service worker
(Le fait que votre projet contienne des fichiers .js
ou .ts
dépend de si vous avez choisi
d’utiliser TypeScript lorsque vous avez créé votre projet. Vous pouvez passer de JavaScript à
TypeScript et inversement dans cette documentation en utilisant le bouton en bas de cette page.)
Si vous avez ajouté Vitest lors de l’initialisation de votre projet, vos tests
unitaires pourront être placés dans le dossier src
avec l’extension .test.js
.
static
Tout asset statique devant être servi tel quel, comme robots.txt
ou favicon.png
, doit être placé
dans ce dossier.
tests
Si vous avez ajouté Playwright lors de l’initialisation de votre projet afin de faire des tests dans le navigateur, ces tests pourront être placés dans ce dossier.
package.json
Votre fichier package.json
doit inclure @sveltejs/kit
, svelte
et vite
comme
devDependencies
.
Lorsque vous créez un projet avec npx sv create
, vous remarquerez également que package.json
contient "type": "module"
. Ceci signifie que les fichiers .js
sont interprétés comme des modules
natifs JavaScript supportant les mot-clés import
et export
. Les fichiers en CommonJS nécessitent
alors une extension .cjs
.
svelte.config.js
Ce fichier contient votre configuration Svelte et SvelteKit.
tsconfig.json
Ce fichier (ou jsconfig.json
, si vous préférez vérifier le typage dans des fichiers .js
, plutôt
que dans des fichiers .ts
) configure TypeScript, si vous avec ajouté la vérification de types
pendant npx sv create
. Puisque SvelteKit repose sur le fait que certaines configurations doivent
être définies d’une certaine manière, il génère lui-même son fichier .svelte-kit/tsconfig.json
que
votre propre configuration doit étendre avec extends
.
vite.config.js
Un projet SvelteKit n’est en réalité qu’un projet Vite qui utilise le plugin
@sveltejs/kit/vite
, en plus d’autres configurations
Vite.
Autres fichiers
.svelte-kit
Au fur et à mesure que vous allez construire votre projet, SvelteKit va générer des fichiers dans un
dossier .svelte-kit
(configurable avec outDir
). Vous pouvez ignorer son
contenu, et le supprimer à tout moment (tous ces fichiers seront régénérés lors du prochain dev
ou
build
).
Modifier cette page sur Github