svelte component template

Sufle 3 -Komponentenvorlage

Eine stark opinionierte Basis für den Aufbau von gemeinsamen Sufle 3-Komponenten von Svelte 3

Inhaltsverzeichnis

1. Merkmale
2. Erste Schritte
3. Entwicklung
4. Vorprozessoren
5. Testen
6. Veröffentlichung zu NPM
7. Häufig gestellte Fragen

Merkmale

• Vorverarbeitung
• Bildung
• Linie
• Storybook
• Testen

Erste Schritte

1. Klonen Sie die Vorlage:

Option Nr. 1: Klonen Sie es mit Githubs "Verwenden Sie diese Vorlage" Option:

Option Nr. 2: Klonen Sie dieses Repository mit DEGIT:

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

2. Geben Sie den Ordner ein:

 cd my-new-component

2. Git einleiten:

git init

3. Abhängigkeiten installieren:

npm install

3. Configure package.json :

npm init

4. Starten Sie Codierung:

code .

• Der Quellcode Ihrer Komponente lebt in src/lib/[MyComponent]/[MyComponent].svelte .

Entwicklung

1. STARTEKIT STARTE:

npm run dev

2. Bearbeiten Sie eine Komponentendatei in src/lib , speichern Sie sie und beobachten Sie, wie die Magie passiert.

3. Exportieren Sie Ihre Komponenten in src/lib/index.js .

4. Importieren Sie Ihre Komponenten in src/routes/index.svelte aus "$ lib $", sodass Sie eine Vorschau anstellen und testen können.

5. Navigieren Sie zu Localhost: 3000, um Ihre Komponenten live zu sehen.

Vorprozessoren

Die gesamte Vorverarbeitung wird mit schlanken Präzess behandelt. Konfigurieren Sie es in svelte.config.js .

Testen

Interaktionstests

Dies ist eine einfache und intuitive Methode, die mithilfe von Zypressen über das Storybook erfolgen kann. Und Beispiel- und vorgefertigte Testskripte finden Sie in diesem Repository, und weitere Informationen finden Sie in den Dokumenten von Storybook.

Schnappschusstests

In diesem Repo finden Sie einen grundlegenden Workflow, der Chromat für Snapshot -Tests verwendet.

Häufig gestellte Fragen

Wofür ist die index.js -Datei?

Es ist für Sufle, mehrere Komponenten aus einer einzigen Quelle importieren zu können.

Zum Beispiel können der Benutzer dies tun:

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

Anstatt:

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

Wie füge ich 3'rd Party CSS in meine Komponenten ein?

Es gibt einige Möglichkeiten, dies zu tun:

1. Fügen Sie keine 3'rd -Parteien -CSS hinzu und sagen Sie Ihren Benutzern einfach, dass sie dies tun sollen (wahrscheinlich mit Postcs).
2. Fügen Sie es über eine CDN ein, wie SO:

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

Veröffentlichung zu NPM

1. Bereiten Sie das Paket für die Veröffentlichung vor:

npm run package

2. Veröffentlichen Sie das Paket:

 cd package
npm run publish

• Erstellen und Veröffentlichen von öffentlichen Paketen
• Erstellen und Veröffentlichung ungeschichteter öffentlicher Pakete