Svelte 및 Storybook을 사용하여 재사용 가능한 구성 요소 라이브러리 구축 방법

대형 응용 프로그램을 구축할 때, 라이브러리는 매우 중요한 고려 요소이다. 왜냐하면 라이브러리는 이미 구축된 코드와 논리를 대량으로 작성하는 것을 막기 때문이다.
본고는 독자들에게 Storybook(시각화 테스트 구성 요소)와 Svelte(실제 구성 요소 구축)를 이용하여 재사용 가능한 구성 요소를 구축하는 방법을 소개하고자 한다.
우리는 사용자가 한 줄의 코드로만 스타일화된 단추를 만들 수 있는 간단한 단추 라이브러리를 만들 것입니다.

무엇이 이야기책입니까?

Storybook은 UI 개발을 위한 도구로 구성 요소를 분리하여 개발을 더욱 빠르고 쉽게 합니다.이것 또한 우리에게 구성 요소를 볼 수 있는 환경을 제공했다.자세한 내용은 Storybook documentation를 참조하십시오.

날씬하다

itsblog에 따르면 Svelte는 구성 요소 구조로 React나 Vue와 같지만 중요한 차이가 있다.다른 프레임워크와 달리 Svelte는 구축할 때 실행되며 구성 요소를 효율적인 명령식 코드로 변환하고 외과 수술을 통해 DOM을 업데이트한다.따라서 뛰어난 성능 특징을 지닌 웅대한 응용 프로그램을 작성할 수 있습니다.
따라서 Svelte는 UI를 업데이트하는 다른 프레임워크처럼 작동하지 않고 백엔드에서 구성 요소 파일을 최적화된 자바스크립트로 컴파일한다는 간단한 뜻이다.네, Svelte는 하나의 컴파일러일 뿐이지, 하나의 프레임워크가 아닙니다.

가설

HTML, CSS, 자바스크립트, 날씬한 기초 지식을 익혔다고 가정합니다.걱정하지 마라, 이전에 이야기책이 없었던 경험이 필요하다.

이야기책 입문

Storybook + Svelte 템플릿을 사용하여 프로그램을 설정할 것입니다. 우리가 해야 할 첫 번째 일은 degit을 사용하여 템플릿을 설정하는 것입니다.
다음 명령을 실행합니다.

# Clone template
npx degit chromaui/intro-storybook-svelte-template svelte-button

cd svelte-button

# Install dependencies
npm install

지금까지 모든 것이 순조롭다면 다음 명령을 실행하십시오.

npm run storybook

이야기책은localhost:6006에서 열립니다. 아래 화면을 보실 수 있습니다.

이제 너는 날씬한 도서관을 세우는 데 한 걸음 더 가까워졌기 때문에 커피를 한 모금 마실 수 있다.

파일 구조

이전에 생성된 템플릿 중 일부 중요한 파일과 폴더는 주의를 기울여야 합니다.다음과 같습니다.

“virtual doms”

rollup.config.js

src/main.js

rollup.config.js

집합하다.배치하다.js 파일에는 svelte 컴파일러가 코드 전체를 어떻게 읽고 컴파일해야 하는지에 대한 메타데이터가 포함되어 있습니다.따라서, 우리는 코드 라이브러리를 어떻게 정확하게 구성하는지 알 수 있도록 컴파일러가 어떻게 설정되었는지 자세히 이해해야 한다.
따라서 다음 코드의 입력 부분은 컴파일러가 컴파일할 때 볼 위치를 알려 줍니다.따라서 우리의 주요 부품은 수출될 것이다.

export default {
  input: "src/main.js",
  output: {
    sourcemap: true,
    format: "iife",
    name: "app",
    file: "public/build/bundle.js",
  }
}

src/main.js

기본적으로 우리는 이런 결과를 얻을 수 있다.

import App from './App.svelte';

const app = new App({
  target: document.body,
  props: {
    name: 'world'
  }
});

export default app;

이것은 날씬한 조립품 사이에서 도구를 전달하는 기본적인 방식이지만, 우리는 이런 방식을 필요로 하지 않는다.그러나 프로젝트가 끝날 때 우리는 이런 물건이 있을 것이다.

export { default as Button } from './components/buttons/Button.svelte'

src/stories

stories 폴더는 서로 다른 구성 요소 src/stories 를 포함합니다.이 파일들에서, 우리는 코드를 직관적으로 테스트하는 데 도움을 줄 이야기책 코드를 작성할 것이다.
이 폴더의 파일을 계속 지울 수 있습니다. 왜냐하면 우리는 우리의 파일을 만들 것입니다.

버튼 구성 요소 생성하기

우선, 나는 우리가 .stories.js files 폴더에 있는 모든 파일과 폴더를 삭제하길 희망한다. src 파일은 우리의 루트 파일이기 때문이다.main.js 폴더에서 저장소에 있어야 하는 각 구성 요소 폴더를 만듭니다.그러나 본문에서 우리는 단지 하나의 구성 요소만 있다.버튼 구성 요소.
새로 만든components 폴더에'buttons' 폴더를 만들고 button 구성 요소와 관련된 모든 코드를 저장합니다.buttons 폴더에 src 파일을 만들 것입니다.

src                     
└─ components            
    └─ buttons           
      └─ Button.svelte              

다음에 우리가 해야 할 일은 button 요소를 만들고 동적 클래스를 만들어서 필요에 따라 다양한 스타일을 가질 수 있도록 하는 것이다.

<script>
  export let value
  export let size = 'md';
  export let type = 'default';
  export let shape = 'default';
  export let outlined = false;

  const outlinedClass = outlined
    ? `gl-btn-outlined gl-btn-outlined-${type}`
    : `gl-btn-${type}`;
</script>

  <button class="gl-btn gl-btn-{shape} gl-btn-{size} {outlinedClass}">
    {value}
  </button>

단추 구성 요소가 무엇인지 지정했으니, 우리가 원하는 모든 용례에 맞는 스타일을 작성합시다.

<script>
  export let value
  export let size = 'md';
  export let type = 'default';
  export let shape = 'default';
  export let outlined = false;

  const outlinedClass = outlined
    ? `gl-btn-outlined gl-btn-outlined-${type}`
    : `gl-btn-${type}`;
</script>

  <button class="gl-btn gl-btn-{shape} gl-btn-{size} {outlinedClass}">
    {value}
  </button>


<style>
  .gl-btn {
    border-radius: 5px;
    cursor: pointer;
  }
  .gl-btn-outlined {
    background: transparent !important;
  }
  .gl-btn-pill {
    border-radius: 50px;
  }
  .gl-btn-sm {
    padding: 10px 20px;
  }
  .gl-btn-md {
    padding: 13px 32px;
  }
  .gl-btn-lg {
    font-size: larger;
    padding: 15px 50px;
  }
  .gl-btn-primary{
    color: white;
    background: #0275d8;
    border: #0275d8
  }
  .gl-btn-outlined-primary {
    color: #0275d8;
    border: 1px #0275d8 solid
  }
  .gl-btn-success{
    color: white;
    background: #5cb85c;
    border: #5cb85c;
  }
  .gl-btn-outlined-success {
    color: #5cb85c;
    border: 1px #5cb85c solid
  }
  .gl-btn-secondary{
    color: white;
    border: grey;
    background: grey;
  }

  .gl-btn-outlined-secondary{
    color: grey;
    border: 1px grey solid;
  }

  .gl-btn-danger{
    color: white;
    background: #d9534f;
    border: #d9534f;
  }
  .gl-btn-outlined-danger{
    color: #d9534f;
    border: 1px #d9534f solid;
  }
  .gl-btn-warning{
    color: white;
    background: #f0ad4e;
    border: #f0ad4e
  }
  .gl-btn-outlined-warning{
    color: #f0ad4e;
    border: 1px #f0ad4e solid
  }
  .gl-btn-info{ color: white;
    background: #5bc0de;
    border: #5bc0de;
  }
  .gl-btn-outlined-info{
    color: #5bc0de;
    border: 1px #5bc0de solid;
  }
  .gl-btn-light{
    background: #f7f7f7;
    border: #f7f7f7;
  }
  .gl-btn-dark{
    color: white;
    background: #292b2c;
    border: #292b2c;
  }
  .gl-btn-outlined-dark{
    color: #292b2c;
    border: 1px #292b2c solid;
  }
  .gl-btn-link{
    background: transparent;
    border: transparent;
    color: #0275d8;
  }
  .gl-btn-link:hover {
    text-decoration: underline;
  }

</style>

css를 어디에나 저장할 수 있습니다. 저는 css를 같은 파일에 저장하는 것을 선택했을 뿐입니다.
마지막으로, 우리는 Button.svelte 파일의 단추 구성 요소를 내보내서, 다시 사용하기 위해 기존 코드를 대체할 것입니다.

export { default as Button } from './components/buttons/Button.svelte'

스토리북 시각 테스트 만들기

Storybook은 재사용을 위해 구성 요소를 기록하고 오류를 방지하기 위해 구성 요소를 자동으로 직관적으로 테스트합니다.
우선 main.js 폴더에 stories 폴더를 만들고 src 폴더에 stories 파일을 만들 것입니다.

src                      
└─ stories               
  └─ button.stories.js  

단계 1: 버튼 구성 요소 가져오기

import Button from '../components/buttons/Button.svelte'

2단계: 구성 요소를 storybook으로 내보내기

export default {
    title: 'Button',
    component: Button
}

Storybook에 모든 테스트 용례를 포함하는 "Button"이라는 폴더가 표시됩니다.

3단계: 주요 시각 테스트 작성

export const Default = () => ({
    Component: Button,
    props: {
        value: 'Button'
    }
})

export const Success = () => ({
    Component: Button,
    props: {
        value: 'Button',
        type: 'success'
    }
})

너는 반드시 이런 화면을 보아야 한다.

button.stories.js 파일은 다음과 같습니다.

import Button from '../components/buttons/Button.svelte'

export default {
    title: 'Button',
    component: Button
}

export const Default = () => ({
    Component: Button,
    props: {
        value: 'Button'
    }
})

export const Success = () => ({
    Component: Button,
    props: {
        value: 'Button',
        type: 'success'
    }
})

이제, 우리의 단추 구성 요소 라이브러리는 이것으로 끝납니다.창고의 흐름은 위의 그림과 같아야 한다.나는 또한 button.stories.js 파일에 더 많은 시각화 테스트를 추가했고 튜토리얼 끝에 원본 코드를 제공했다.

npm에 게시

이것은 가장 간단한 부분이다.

첫 번째 단계:npm 계정 만들기

npmjs.com에 액세스하여 계정을 생성합니다(없는 경우).

2단계: CLI에서 npm에 로그인

npm login

사용자 이름, 암호 및 전자 메일 주소를 입력하라는 메시지가 표시됩니다.

3단계: 출판

npm publish

참고: 패키지 이름은 button.stories.js 파일에서 변경할 수 있습니다.

결론

Svelte와 Storybook이 있으면 최소한의 노력으로 단추 구성 요소 라이브러리를 만들 수 있습니다.
이 프로그램의 전체 소스 코드는 Github에서 찾을 수 있습니다.이 이야기책을 시도해 보는 것은 매우 재미있다. 나는 네가 그것을 써서 무엇을 할 수 있는지 읽어 보라고 건의한다.질문이 있으면 언제든지 Twitter에 문의하십시오.