svelte component template

Modèle de composant svelte 3

Une base hautement opinée pour construire des composants Svelte 3 partageables

Table des matières

1. Caractéristiques
2. Commencer
3. Développement
4. Préprocesseurs
5. Essai
6. Publication à NPM
7. Questions fréquemment posées

Caractéristiques

• Prétraitement
• Formateur
• Libellé
• Livre de contes
• Essai

Commencer

1. Clone le modèle:

Option # 1: Clone It avec l'option "Utiliser ce modèle" de GitHub:

Option # 2: cloner ce référentiel avec Degit:

npx degit YogliB/svelte-component-template ` my-new-component `

2. Entrez le dossier:

 cd my-new-component

2. Initier Git:

git init

3. Installez les dépendances:

npm install

3. Configurer package.json :

npm init

4. Commencez à coder:

code .

• Le code source de votre composant vit dans src/lib/[MyComponent]/[MyComponent].svelte .

Développement

1. Démarrer Sveltekit:

npm run dev

2. Modifiez un fichier de composant dans src/lib , enregistrez-le et regardez la magie se déroule.

3. Exportez vos composants dans src/lib/index.js .

4. Importez vos composants dans src/routes/index.svelte à partir de `$ lib $, afin que vous puissiez le prévisualiser et le tester.

5. Accédez à LocalHost: 3000 pour voir vos composants en direct.

Préprocesseurs

Tout le prétraitement est géré avec Svelte-Preprocess. Configurez-le dans svelte.config.js .

Essai

Tests d'interaction

Il s'agit d'une méthode simple et intuitive qui peut être effectuée via Storybook, avec l'aide de Cypress. Et des scripts de test d'exemple et de pré-préparés peuvent être trouvés dans ce référentiel, et plus d'informations peuvent être trouvées dans les documents de Storybook.

Tests instantanés

Dans ce dépôt, vous trouverez un flux de travail de base qui utilise chromatique pour les tests d'instantané.

Questions fréquemment posées

À quoi sert le fichier index.js ?

Il s'agit de svelte d'importer plusieurs composants à partir d'une seule source.

Par exemple, il permet à l'utilisateur de faire:

 import { MyComponent , MyOtherComponent } from 'my-component-library' ;

Au lieu de:

 import MyComponent from 'my-component-library/components/MyComponent.svelte' ;
import MyOtherComponent from 'my-component-library/components/MyOtherComponent' ;

Comment inclure 3'rd Party CSS dans mes composants?

Il y a quelques options pour ce faire:

1. N'incluez pas CSS 3'rd Party et dites simplement à vos utilisateurs de le faire (probablement en utilisant PostCSS).
2. Incluez-le via un CDN, comme ainsi:

 @import url ( 'https://unpkg.com/@scope/package/main.min.css' );

Publication à NPM

1. Préparez le package pour la publication:

npm run package

2. Publier le package:

 cd package
npm run publish

• Création et publication de forfaits publics portée
• Création et publication de forfaits publics non copés