Svelte 3 구성요소로 레거시 앱 강화

최근에 마땅한 퍼즈Svelte 3가 있었지만 충분하지 않을 수도 있습니다. 무거운 런타임이 없고 오버헤드가 거의 없는 놀라운 경량 프레임워크입니다. 이는 단순한 SPA 및 동형 웹 앱 이상에 적합한 선택입니다.

Svelte 구성 요소를 생성할 수 있고 거의 추가 단계 없이 배포할 수 있다는 사실을 알고 계셨습니까? 전역 생성자를 통해 이전의 고전 Javascript 라이브러리처럼 사용할 수 있습니다( let myComponent = new MyComponent() )?

Svelte 구성 요소는 기본적으로 표준 JavaScript 클래스로 컴파일되므로 구성 요소와 함께 IIFE 빌드만 추가하면 됩니다. Rollup을 사용하여 수행하는 방법과 구성 요소를 사용하는 방법을 간략하게 보여 드리겠습니다. 공식 앱 스타터 템플릿(https://github.com/sveltejs/template)과 큰 차이는 없지만 Svelte가 개별 구성 요소를 배포하고 소비하는 데 얼마나 편리한지 놓치기 쉬울 수 있다고 생각합니다.

간단한 예제 구성 요소를 사용하여 시연하겠습니다. 전단지 맵을 렌더링하고 사용자가 위치를 선택할 수 있습니다. 선택한 위치가 변경되면(예: 양식 필드를 업데이트하는 데 사용할 수 있음) 이벤트가 발생하고 지도에서 초기 위도/경도 및 확대/축소 수준과 같은 구성을 위한 소품을 허용합니다.

구성 요소는 여기에서 찾을 수 있습니다. https://github.com/jimutt/svelte-pick-a-place

npm으로도 설치할 수 있습니다: npm install svelte-pick-a-place
(이 구성 요소는 주로 실험용으로 만들어졌으며 Svelte를 사용하여 빌드하는 것이 과잉일 수 있다고 주장할 만큼 간단합니다.)

Svelte 앱 내에서 사용한다면 다음과 같을 것입니다.

<script>
  import PickAPlace from 'svelte-pick-a-place';
</script>

<PickAPlace leaflet={leaflet} on:update={() => console.log('Update!')} on:save={() =>
console.log('On save!')} />

그러나 예를 들어 Bootstrap 3과 Node.js의 흔적이 없는 많은 jQuery로 빌드된 레거시 앱에서 사용하려면 어떻게 해야 할까요? 괜찮아요! IIFE 빌드를 사용하고 전역 생성자를 통해 구성 요소 클래스를 인스턴스화합니다.

<link rel="stylesheet" href="https://unpkg.com/svelte-pick-a-place@latest/dist/pick-a-place.css">
<script src="https://unpkg.com/svelte-pick-a-place@latest/dist/pick-a-place.min.js"></script>

let pickAPlace = new PickAPlace({
  target: document.getElementById('map'),
  props: {
    leaflet: window.L,
    buttons: false
  }
});

// Listen to events through component.$on('eventName', callback)
pickAPlace.$on('update', ({ detail }) => {
  console.log('New position: ', detail);
  // Here we could for example populate an input field with the new value
});

// Update a prop with $set, or set the 'accessors' compiler option
// to true to automatically generate getters and setters for all props
pickAPlace.$set({ buttons: true }); 

부트스트랩을 사용한 Codepen 데모: https://codepen.io/jimutt/pen/ZgaYBP

보시다시피 클래스 API를 통해 소품과 이벤트에 쉽게 액세스할 수 있습니다. 불행히도 현재로서는 슬롯 콘텐츠를 추가하는 편리한 방법이 없습니다.

빌드 구성

Pick a place 구성 요소의 경우 프로덕션 빌드 진입점은 src/components/components.module.js 파일입니다.

export { default } from './PickAPlace.svelte';

여기에는 PickAPlace 구성 요소가 포함된 기본 내보내기가 포함되어 있습니다. 동일한 패키지에서 여러 구성 요소를 내보내고 new MyPackageName.Component1()와 같은 네임스페이스로 인스턴스화하려는 경우 명명된 내보내기를 대신 사용할 수 있습니다.

파일은 rollup.config.js에서 프로덕션 빌드에 대한 입력으로 지정됩니다.

//rollup.config.js
input: !production ? 'src/main.js' : 'src/components/components.module.js',

rollup.config.js에서 구성 요소를 사용하는 다양한 방법을 지원하기 위해 몇 가지 출력을 추가했습니다.

//rollup.config.js
output: [
   { file: 'dist/index.min.mjs', format: 'es' },
   { file: 'dist/index.min.js', format: 'umd', name },
   { file: 'dist/pick-a-place.min.js', format: 'iife', name }
]
// "name" is set to PickAPlace

아마 이미 알아냈겠지만 레거시 앱에 의해 정의되어야 하는 마지막 출력 정의입니다. 위의 출력 구성을 사용하면 Node.js 기반 환경의 최신 앱과 레거시 앱 모두에서 구성 요소를 사용할 수 있습니다.

PickAPlace 구성 요소는 이 프로젝트 템플릿에서 생성된 후 약간 수정되었습니다. https://github.com/YogliB/svelte-component-template

그게 내가 말해야 했던 전부야! Svelte의 다재다능함과 Svelte가 완벽한 웹 앱 그 이상을 위한 훌륭한 선택이라는 사실을 간단히 알리고 싶었습니다!