Mencipta Widget Kendiri dengan Svelte: My Journey and Solutions

Pada beberapa bulan lalu Dalam beberapa bulan lalu, saya ditugaskan untuk menentukan cara menulis dan mengurus widget kendiri untuk kerja sepenuh masa saya. Walaupun agak mudah untuk memastikan ia berfungsi, saya segera menyedari bahawa mengekalkannya adalah satu cabaran yang berbeza sama sekali

Dengan ini, saya memulakan projek sampingan semasa masa lapang dan menjadikannya sumber terbuka. Ini membolehkan saya berkongsi cerapan saya dan strategi yang membantu saya memastikan kualiti widget saya.

Bagaimana saya melakukannya pada asalnya?

Memandangkan widget saya memerlukan tahap kereaktifan yang tinggi, saya sangat bergantung pada API komponen Svelte dan menggunakan Rollup untuk penggabungan. "Ia mudah dan langsung sehingga saya mendapat masalah berikut:

• CSS saya yang tidak digunakan meningkat lebih masa dan saya juga tidak pasti jika hanya CSS komponen yang diingini sedang digabungkan.

• Sukar mengendalikan JavaScript melalui widget tanpa menaip yang ketat. Ia menjadi kucar-kacir kerana saya terpaksa berkongsi beberapa kegunaan seperti penyahkodan dan pengesahan jwt.

Bagaimana saya mengubahnya?

Saya mula mempertimbangkan cara saya boleh mewujudkan beberapa lalai dan, yang lebih penting, menyepadukan sistem jenis. Ini membawa kepada penciptaan projek sampingan saya, langsing-berdiri.

Matlamat svelte-standalone ialah:

• Pastikan CSS yang diperkecil dengan baik dan alih keluar CSS yang tidak digunakan semasa menghimpun.
• Pastikan sistem jenis pilihan disokong dengan baik dan digunakan semula pada semua apl saya.

Nota: sistem jenis pilihan ialah TypeScript.

• Pastikan ujian unit dan penyepaduan.
• Pastikan saya dapat menyemak widget saya secara visual sebelum dan selepas menggulung menghuraikannya.

Bagaimana saya mencapai semua itu?

Selepas memastikan keserasian TypeScript dengan pemalam Rollup dan prapemproses Svelte, saya berundur selangkah dan memecahkan projek saya kepada langkah-langkah penting. Pada asasnya saya mempunyai:

1. .svelte.
2. Fail embed.js yang bertanggungjawab untuk memulakan contoh .svelte file dan menambahkannya pada body.

Daripada itu, saya perhatikan bahawa fail benam saya pada dasarnya adalah lalai yang direplikasi pada semua widget saya dan mula menjananya. Jadi saya dapat menggunakan alat codegen untuk menjana 3 fail berdasarkan fail langsing saya dan keinginan saya untuk mengendalikan jenis di seluruh apl:

1. declaration.d.ts - membolehkan saya mengimport terus komponen langsing saya dan membungkusnya menggunakan jenis SvelteComponent supaya saya menjadikan komponen langsing saya ditaip kuat secara lalai.
2. types.ts - membolehkan saya menulis defaultConfig berdasarkan prop yang diisytiharkan daripada declaration.d.ts.
3. embed.ts - mendayakan permulaan/henti komponen saya dengan cara standard untuk semua widget saya!

Dan voilà! Pendekatan ini menyelesaikan masalah saya dengan sistem jenis dan meningkatkan kebolehselenggaraan widget saya.

Cara Saya Menangani Cabaran CSS:

Cabaran utama berkaitan CSS yang saya hadapi ialah: Bagaimanakah saya boleh membersihkan dan mengecilkan CSS saya tanpa perlu bersusah payah? Bagaimanakah saya boleh menulis CSS yang mudah untuk bekerjasama dan disepadukan ke dalam persekitaran yang berbeza?

Penyelesaiannya agak mudah: hanya gunakan CSS Tailwind.

Dengan pendekatan ini, saya mengenal pasti faedah berikut:

• Tiada Lagi Gaya Bercanggah: Menggunakan Tailwind membolehkan saya berhenti bimbang tentang gaya bercanggah. Contohnya, apabila berurusan dengan apl warisan yang sangat bergantung pada Bootstrap, saya hanya menggunakan awalan dan bendera penting pada widget saya dan konflik telah diselesaikan.

• Penyatuan Lancar: Apabila mengimport widget saya ke dalam apl Tailwind yang lain, saya boleh dengan mudah meninggalkan arahan Tailwind tertentu untuk mengurangkan saiz berkas saya.

• Pembersihan dan Pengurangan yang Mudah: Pengecilan menjadi mudah, dan dengan PurgeCSS terbina dalam Tailwind, saya hanya perlu mengkonfigurasi bendera kandungan dengan betul untuk setiap widget. Ini memastikan bahawa hanya gaya yang diperlukan disertakan dalam berkas terakhir.

Bagaimana Saya Menangani Isu Ujian?

Saya menghadapi cabaran dalam memastikan ujian komprehensif untuk widget saya, meliputi ujian unit, ujian integrasi dan ujian visual.

Matlamat utama saya adalah untuk menggambarkan komponen saya sebelum dan selepas memprosesnya dengan Rollup. Untuk mencapai matlamat ini, saya mengambil langkah berikut:

• Buku Cerita Ditaip Tegas: Saya melaksanakan Buku Cerita ditaip ketat berdasarkan fail declaration.d.ts dan types.ts saya. Ini memudahkan anda menjana cerita lalai untuk setiap widget saya secara automatik.

• Integrasi Vite: Saya menggunakan Vite untuk memuatkan komponen yang digabungkan pada laluan Svelte. Ia juga mudah untuk menjana komponen laluan lalai berdasarkan fail TypeScript saya.

Itu sahaja! Saya sepenuh hati akan menghargai beberapa maklum balas! Juga, lihat svelte-standalone.

Sama ada anda mempunyai soalan, cadangan atau kebimbangan, sila hubungi saya!

Atas ialah kandungan terperinci Mencipta Widget Kendiri dengan Svelte: My Journey and Solutions. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!