svelte component template

Langsing 3 Template Komponen

Basis yang sangat opinial untuk membangun komponen langsing 3 yang dapat dibagikan

Daftar isi

1. Fitur
2. Memulai
3. Berkembang
4. Preprosesor
5. Pengujian
6. Penerbitan ke NPM
7. Pertanyaan yang sering diajukan

Fitur

• Preprocessing
• Format
• Berbaris
• Buku cerita
• Pengujian

Memulai

1. Klon Template:

Opsi #1: Kloning dengan opsi "Gunakan templat ini GitHub":

Opsi #2: Kloning repositori ini dengan degit:

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

2. Masukkan folder:

 cd my-new-component

2. Memulai git:

git init

3. Instal dependensi:

npm install

3. Konfigurasikan package.json :

npm init

4. Mulai Coding:

code .

• Kode Sumber Komponen Anda tinggal di src/lib/[MyComponent]/[MyComponent].svelte .

Berkembang

1. Mulai Sveltekit:

npm run dev

2. Edit file komponen di src/lib , simpan dan tonton keajaiban terjadi.

3. Ekspor komponen Anda di src/lib/index.js .

4. Impor komponen Anda di src/routes/index.svelte dari `$ lib $, sehingga Anda dapat melihat pratinjau dan mengujinya.

5. Arahkan ke LocalHost: 3000 untuk melihat komponen Anda hidup.

Preprosesor

Semua preprocessing ditangani dengan preproses langsing. Konfigurasikan di svelte.config.js .

Pengujian

Pengujian interaksi

Ini adalah metode sederhana dan intuitif yang dapat dilakukan melalui buku cerita, dengan bantuan Cypress. Dan contoh dan skrip uji pra-buatan dapat ditemukan di repositori ini, dan info lebih lanjut dapat ditemukan di dokumen Storybook.

Pengujian Snapshot

Dalam repo ini Anda akan menemukan alur kerja dasar yang menggunakan kromatik untuk pengujian snapshot.

Pertanyaan yang sering diajukan

Untuk apa file index.js ?

Ini untuk Svelte dapat mengimpor beberapa komponen dari satu sumber.

Misalnya, memungkinkan pengguna melakukan:

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

Alih-alih:

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

Bagaimana cara memasukkan CSS pihak ke -3 ke dalam komponen saya?

Ada beberapa opsi untuk melakukan ini:

1. Jangan sertakan CSS pihak ke -3 dan cukup beri tahu pengguna Anda untuk melakukannya (mungkin menggunakan PostCS).
2. Sertakan melalui CDN, seperti demikian:

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

Penerbitan ke NPM

1. Siapkan paket untuk diterbitkan:

npm run package

2. Publikasikan paket:

 cd package
npm run publish

• Membuat dan menerbitkan paket publik yang dilingkupi
• Membuat dan menerbitkan Paket Publik yang Tidak Diterbitkan