SvelteKit으로 Svelte 라이브러리를 빠르게 구축

이 게시물에서 우리는 15 minutes 내에서 날씬한 라이브러리로 간단한 버튼을 만들 것입니다.

전제 조건:

Connect to GitHub with SSH

Sign up an npm account

이 명령을 실행하여 프로젝트를 생성하라는 명령을 내립니다.

npm create svelte@latest svelte-button-example

명령이 실행되는 동안 다음 답변을 선택합니다.

어떤 Svelte 앱 템플릿인가요? > Library skeleton project

TypeScript로 유형 검사를 추가하시겠습니까? > Yes, using TypeScript syntax

For people who don't want to use TypeScript or don't want to build a TypeScript library, feel free to use the option above. Because we can write code in javascript without type and SvelteKit will generate types automatically for the build. Then the lib can be used in both javascript and typescript projects.

코드 린팅을 위해 ESLint를 추가하시겠습니까? > Yes

코드 서식을 위해 Prettier를 추가하시겠습니까? > Yes

브라우저 테스트를 위해 Playwright를 추가하시겠습니까? > Yes

그런 다음 터미널의 지침에 따라 패키지를 설치하고 프로젝트를 시작합니다.



git을 통해 패키지 버전을 관리하고 싶기 때문에 step 3를 잊지 마십시오.



위 이미지처럼 힌트(노란색) 섹션이 보이더라도 걱정하지 마세요. 다음 단계에서 브랜치 이름을 변경하고 로컬 리포지토리를 GitHub에 푸시합니다.

GitHub 저장소 설정

GitHub 웹 사이트를 열고 리포지토리svelte-button-example(프로젝트와 동일한 이름)를 생성합니다.
그런 다음 기존 리포지토리에 대한 지침을 따릅니다.

VSCode용 확장 및 자동 서식 설정

만들기.vscode/settings.json

{
    "editor.formatOnSave": true,
    "editor.tabSize": 2,
}

그런 다음 ESLint , Svelte for VS Code을 설치합니다.
확장.

멋진 vscode 아이콘을 원하면 vscode-icons을 설치하십시오.

구성 요소 만들기

Button.svelte 폴더에 src/lib를 생성합니다.

<button class="btn" on:click>
    <slot />
</button>
<style>
.btn {
    border: 1px solid rgb(209, 213, 219);
    border-radius: 0.375rem;
    cursor: pointer;
    padding: 0.375rem 1rem;
    font-size: 100%;
    background-color: inherit;
    color: #212121;
}
.btn:hover {
    border-width: 1px;
    border-radius: 0.375rem;
    border-color: rgb(164, 164, 164);
    background-color: rgb(238 238 238);
}
</style>

개발 중에 테스트하려면 홈페이지의 버튼을 사용하십시오/routes/+page.svelte.

<script>
    import Button from '$lib/Button.svelte';
    function handleClick() {
        console.log('clicked');
    }
</script>

<Button on:click={handleClick}>My Button</Button>

그런 다음 http://localhost:5173/의 버튼을 볼 수 있습니다.

npm에 게시

쓰기 README.md 먼저

실행 중인 npm에 로그인:

npm add user

귀하의 credentials 및 귀하의 email를 입력하여 OTP를 받으십시오.



그런 다음 다음 명령을 실행하여 /package 폴더를 생성합니다.

npm run build
cd package
npm publish

패키지 폴더는 정확히 npm에 게시된 다음 사용자 프로젝트/node_modules에 다운로드됩니다.
사용자가 패키지를 사용하려는 경우 다음을 수행할 수 있습니다.

<script>
import Button from 'svelte-button-example/Button.svelte'
...
</script>
...

또는 TypeScript 사용:

<script lang="ts">
import Button from 'svelte-button-example/Button.svelte'
...
</script>
...

SvelteKit의 유형 생성기 덕분에 JS 사용자나 TS 사용자에게 큰 차이가 없습니다.

Let's take a look on the package folder, we did not re-export the Button
component to package/index.js so users have specify which component
they want in svelte-button-example folder,
I love this because it's good for tree shaking and simple enough.

But if you want users are able to do:

import { Button } from 'svelte-button-example';

Or

import Button from 'svelte-button-example';

Re-export the component in lib/index.js, read more at the SvelteKit official packaging document

패키지를 새 버전으로 업데이트

먼저 구성 요소를 업데이트한 다음 다음을 수행합니다.

개발 모드 홈페이지에 몇 가지 테스트/데모 코드 작성: routes/+page.svelte (선택 사항)

package.json의 업데이트 버전 및 새로운 변경 사항

에 대한 업데이트README.md

GitHub에 새 커밋 푸시

실행:

npm run build
npm publish ./package