Svelte를 사용하여 독립형 위젯 만들기: 나의 여정 및 솔루션

지난 몇 달 동안 저는 정규직 업무를 위한 독립형 위젯을 작성하고 관리하는 방법을 결정하는 임무를 받았습니다. 제대로 작동하는지 확인하는 것은 상대적으로 간단했지만, 이를 유지하는 것은 전혀 다른 문제라는 것을 금방 깨달았습니다

이를 염두에 두고 여가 시간에 사이드 프로젝트를 시작하여 오픈 소스로 만들었습니다. 이를 통해 위젯의 품질을 보장하는 데 도움이 되는 통찰력과 전략을 공유할 수 있었습니다.

원래 어떻게 했나요?

내 위젯에는 높은 수준의 반응성이 필요했기 때문에 Svelte 구성 요소 API에 크게 의존하고 롤업을 사용하여 번들링했습니다. "다음과 같은 문제가 발생하기 전까지는 간단하고 직접적이었습니다.

• 사용하지 않는 CSS가 초과 근무로 늘어나고 있고 원하는 구성 요소의 CSS만 번들로 제공되고 있는지 확신할 수 없었습니다.

• 엄격한 입력 없이 위젯을 통해 JavaScript를 처리하는 데 어려움을 겪습니다. jwt 디코딩, 인증 등 일부 유틸리티를 공유해야 해서 금방 엉망이 되었습니다.

어떻게 바꿨나요?

몇 가지 기본값을 설정하고, 더 중요하게는 유형 시스템을 통합할 수 있는 방법을 고려하기 시작했습니다. 이로 인해 내 사이드 ​​프로젝트인 svelte-standalone이 탄생하게 되었습니다.

Svelte-standalone의 목표는 다음과 같습니다.

• CSS를 잘 축소했는지 확인하고 번들링할 때 사용하지 않는 CSS를 제거하세요.
• 선택한 유형 시스템이 모든 앱에서 잘 지원되고 재사용되는지 확인하세요.

참고: 선택한 유형 시스템은 TypeScript였습니다.

• 단위 및 통합 테스트를 보장합니다.
• 롤업 파싱 전후에 위젯을 시각적으로 확인할 수 있는지 확인하세요.

내가 그 모든 것을 어떻게 성취했는가?

Rollup 플러그인 및 Svelte 전처리기와 TypeScript 호환성을 확인한 후 한 걸음 물러나 프로젝트를 주요 단계로 나누었습니다. 기본적으로 다음과 같은 것이 있었습니다.

1. <컴포넌트>.svelte.
2. .svelte 파일의 인스턴스를 시작하고 이를 본문에 추가하는 역할을 담당하는 embed.js 파일입니다.

그때 내 포함 파일이 기본적으로 모든 위젯에 복제된 기본값이라는 것을 확인하고 생성하기 시작했습니다. 그래서 codegen 도구를 사용하여 내 얇은 파일과 앱 전체에서 유형을 처리하려는 욕구를 기반으로 3개의 파일을 생성할 수 있었습니다.

1. declaration.d.ts - svelte 구성 요소를 직접 가져와 SvelteComponent 유형을 사용하여 래핑할 수 있으므로 기본적으로 svelte 구성 요소를 강력한 형식으로 전환했습니다.
2. types.ts -declaration.d.ts에서 선언된 props를 기반으로 defaultConfig를 작성할 수 있도록 활성화되었습니다.
3. embed.ts - 모든 위젯에 대해 표준 방식으로 구성 요소의 시작/중지를 활성화했습니다!

그리고 짜잔! 이 접근 방식으로 유형 시스템 관련 문제가 해결되었고 위젯의 유지 관리 가능성이 향상되었습니다.

CSS 문제를 해결한 방법:

제가 직면했던 주요 CSS 관련 과제는 다음과 같습니다. 번거로움 없이 CSS를 제거하고 축소하려면 어떻게 해야 합니까? 다양한 환경에서 쉽게 협업하고 통합할 수 있는 CSS를 작성하려면 어떻게 해야 합니까?

해결책은 매우 간단했습니다. Tailwind CSS를 사용하면 됩니다.

이러한 접근 방식을 통해 다음과 같은 이점을 확인했습니다.

• 더 이상 충돌하는 스타일이 없습니다: Tailwind를 사용하면 충돌하는 스타일에 대해 걱정할 필요가 없습니다. 예를 들어 Bootstrap에 크게 의존하는 기존 앱을 처리할 때 위젯에 접두사와 중요한 플래그를 적용하기만 하면 충돌이 해결되었습니다.

• 원활한 통합: 내 위젯을 다른 Tailwind 앱으로 가져올 때 특정 Tailwind 지시어를 쉽게 생략하여 번들 크기를 줄일 수 있었습니다.

• 손쉬운 제거 및 축소: 축소가 간단해졌고 Tailwind에 내장된 PurgeCSS를 사용하면 각 위젯에 대해 콘텐츠 플래그를 적절하게 구성하기만 하면 되었습니다. 이를 통해 필요한 스타일만 최종 번들에 포함되었습니다.

테스트 문제를 어떻게 해결했나요?

단위 테스트, 통합 테스트, 시각적 테스트 등 위젯에 대한 포괄적인 테스트를 보장하는 데 어려움이 있었습니다.

제 주요 목표는 구성 요소를 롤업으로 처리하기 전과 후에 시각화하는 것이었습니다. 이를 달성하기 위해 다음 단계를 수행했습니다.

• 엄격한 형식의 스토리북: Declaration.d.ts 및 type.ts 파일을 기반으로 엄격한 형식의 스토리북을 구현했습니다. 이를 통해 각 위젯에 대한 기본 스토리를 자동으로 생성하는 것이 편리해졌습니다.

• Vite 통합: Vite를 사용하여 Svelte 경로에 번들 구성 요소를 로드했습니다. TypeScript 파일을 기반으로 기본 경로 구성 요소를 생성하는 것도 편리했습니다.

그게 다였습니다! 피드백을 주시면 진심으로 감사하겠습니다! 또한 svelte-standalone도 확인해 보세요.

질문, 제안, 우려사항이 있으시면 언제든지 연락주세요!

위 내용은 Svelte를 사용하여 독립형 위젯 만들기: 나의 여정 및 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!