svelte component template

เทมเพลตองค์ประกอบ Svelte 3

ฐานที่เปิดกว้างสูงสำหรับการสร้างส่วนประกอบ Svelte 3 ที่แชร์ได้

สารบัญ

1. คุณสมบัติ
2. เริ่มต้น
3. การพัฒนา
4. ตัวประมวลผลล่วงหน้า
5. การทดสอบ
6. การเผยแพร่ไปยัง NPM
7. คำถามที่พบบ่อย

คุณสมบัติ

• การประมวลผลล่วงหน้า
• ที่จัดตั้งขึ้น
• การเป็นผ้าสำลี
• หนังสือนิทาน
• การทดสอบ

เริ่มต้น

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. นำทางไปยัง LocalHost: 3000 เพื่อดูส่วนประกอบของคุณมีชีวิตอยู่

ตัวประมวลผลล่วงหน้า

การประมวลผลล่วงหน้าทั้งหมดได้รับการจัดการด้วย svelte-preprocess กำหนดค่าใน svelte.config.js

การทดสอบ

การทดสอบปฏิสัมพันธ์

นี่เป็นวิธีที่ง่ายและใช้งานง่ายที่สามารถทำได้ผ่านนิทานด้วยความช่วยเหลือของไซเปรส และตัวอย่างและสคริปต์ทดสอบที่ทำไว้ล่วงหน้าสามารถพบได้ในที่เก็บนี้และข้อมูลเพิ่มเติมสามารถพบได้ในเอกสารของหนังสือนิทาน

การทดสอบภาพรวม

ใน repo นี้คุณจะพบเวิร์กโฟลว์พื้นฐานที่ใช้สีสำหรับการทดสอบสแน็ปช็อต

คำถามที่พบบ่อย

ไฟล์ 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' ;

ฉันจะรวม CS ของบุคคลที่ 3 ในส่วนประกอบของฉันได้อย่างไร?

มีตัวเลือกบางอย่างที่ต้องทำเช่นนี้:

1. อย่ารวม CSS ของบุคคลที่ 3 และบอกผู้ใช้ของคุณให้ทำเช่นนั้น (อาจใช้ postcss)
2. รวมผ่าน CDN เช่น SO:

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

การเผยแพร่ไปยัง NPM

1. เตรียมแพ็คเกจสำหรับการเผยแพร่:

npm run package

2. เผยแพร่แพ็คเกจ:

 cd package
npm run publish

• การสร้างและเผยแพร่แพ็คเกจสาธารณะที่มีขอบเขต
• การสร้างและเผยแพร่แพ็คเกจสาธารณะที่ยังไม่ได้ใช้