svelte component template

قالب مكون Svelte 3

قاعدة عالية الكبرى لبناء مكونات سفيلتي 3 القابلة للمشاركة

جدول المحتويات

1. سمات
2. ابدء
3. النمو
4. المعالجات المسبقة
5. الاختبار
6. النشر إلى NPM
7. الأسئلة المتداولة

سمات

• المعالجة المسبقة
• التكوين
• linting
• قصص
• الاختبار

ابدء

1. استنساخ القالب:

الخيار رقم 1: استنساخه مع خيار "استخدم هذا القالب" الخاص بـ Github:

الخيار رقم 2: استنساخ هذا المستودع مع Degit:

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

2. أدخل المجلد:

 cd my-new-component

2. بدء git:

git init

3. تثبيت التبعيات:

npm install

3. تكوين package.json :

npm init

4. ابدأ الترميز:

code .

• يعيش رمز مصدر المكون الخاص بك في src/lib/[MyComponent]/[MyComponent].svelte .

النمو

1. ابدأ Sveltekit:

npm run dev

2. قم بتحرير ملف مكون في src/lib ، وحفظه وشاهد السحر يحدث.

3. تصدير المكونات الخاصة بك في src/lib/index.js .

4. استيراد مكوناتك في src/routes/index.svelte من `$ lib $ ، حتى تتمكن من معاينة واختبارها.

5. انتقل إلى المضيف المحلي: 3000 لرؤية مكوناتك على الهواء مباشرة.

المعالجات المسبقة

يتم التعامل مع جميع المعالجة المسبقة مع المعالجة المسلحة. تكوينه في svelte.config.js .

الاختبار

اختبار التفاعل

هذه طريقة بسيطة وبديهية يمكن القيام بها من خلال قصة القصص ، بمساعدة Cypress. ومثال ونصوص اختبار مسبق الصنع في هذا المستودع ، ويمكن العثور على مزيد من المعلومات في مستندات Storybook.

اختبار لقطة

في هذا الريبو ، ستجد سير عمل أساسي يستخدم لوني لاختبار اللقطة.

الأسئلة المتداولة

ما هو ملف index.js ؟

من الممكن أن تكون Svelte قادرة على استيراد مكونات متعددة من مصدر واحد.

على سبيل المثال ، يتيح للمستخدم القيام:

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

بدلاً من:

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

كيف يمكنني تضمين CSS 3'rd Party في مكوناتي؟

هناك بعض الخيارات للقيام بذلك:

1. لا تشمل 3'rd Party CSS وأخبر المستخدمين فقط بالقيام بذلك (ربما باستخدام postcss).
2. قم بتضمينه عبر CDN ، مثل ذلك:

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

النشر إلى NPM

1. قم بإعداد الحزمة للنشر:

npm run package

2. نشر الحزمة:

 cd package
npm run publish

• إنشاء ونشر الحزم العامة المنتشر
• إنشاء ونشر الحزم العامة غير المتواضعة