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. configure 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. `$ lib $에서 src/routes/index.svelte 에서 구성 요소를 가져 오면 미리보기 및 테스트 할 수 있습니다.

5. LocalHost : 3000으로 이동하여 구성 요소가 라이브를보십시오.

사전 처리기

모든 전처리는 Svelte Proprocess로 처리됩니다. svelte.config.js 로 구성하십시오.

테스트

상호 작용 테스트

이것은 Cypress의 도움으로 Storybook을 통해 수행 할 수있는 간단하고 직관적 인 방법입니다. 예제 및 사전 제작 된 테스트 스크립트는이 저장소에서 찾을 수 있으며 자세한 정보는 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' ;

내 구성 요소에 3 'Party CSS를 포함시키는 방법은 무엇입니까?

이를위한 몇 가지 옵션이 있습니다.

1. 3의 파티 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

• 공개 패키지 제작 및 출판
• 공공 패키지 만들기 및 출판