svelte web components template

Svelte-web 구성 요소-템플릿

Vite, Svelte 및 TypeScript를 사용하여 공유 가능한 웹 구성 요소 라이브러리를 구축하기위한 기본 템플릿.

이 템플릿은 일반 HTML 또는 React, Angular, Vue 또는 Svelte와 같은 주요 프레임 워크 내에서 사용할 수있는 것보다 바닐라 웹 구성 요소를 생성합니다 (호환성 참조).

이 템플릿을 사용하는 방법

GitHub 에서이 템플릿 버튼을 선택 하여이 템플릿에서 새 GitHub 리포를 직접 만들 수 있습니다.

다음 명령으로 로컬로 복제 할 수도 있습니다.

npx degit sinedied/svelte-web-components-template#main my-component-lib
cd my-component-lib
npm install

구성 요소 소스 코드는 lib/ 폴더에 있습니다. .wc.svelte 확장자가있는 구성 요소 만 웹 구성 요소로 내보내고 라이브러리에서 사용할 수 있습니다. 즉, 구현 세부 정보의 아동 구성 요소로 .svelte 확장자가있는 일반 Svelte 구성 요소를 사용할 수도 있음을 의미합니다.

lib 폴더에 추가하고 lib/index.js 편집하여 추가 구성 요소를 추가 할 수 있습니다.

구성 요소 테스트

다음과 같이 개발 서버를 시작할 수 있습니다.

npm start

그런 다음 브라우저를 LocalHost : 5173으로 열어보십시오.

이렇게하면 demo/ 폴더에 위치한 데모 애플리케이션을 구축하여 개발 중에 웹 구성 요소를 사용하고 테스트 할 수 있습니다.

단위 테스트가 필요한 경우 Jest 및 Jest 테스트 라이브러리를 살펴볼 수 있습니다.

데모 앱과 함께 구축 된 웹 구성 요소를 사용합니다

데모 응용 프로그램은 구성 요소의 개발 및 테스트를 위해 제공되므로 기본적으로 lib/ 폴더에서 .svelte 파일을 가져 오는 이유입니다.

원하는 경우 Demo/ dist/ demo/src/App.svelte 편집하고 가져 import '../../lib'; import '../../../dist/lib'; bundleComponents 옵션이 활성화되거나 가져 오기 import import '../../dist/MyComponent.wc.js'; 그렇지 않으면.

또한 dist/lib/ 폴더를 먼저 생성하려면 npm run build 스크립트를 실행해야합니다.

도서관 구축

명령 npm run build dist/lib/ 폴더에 웹 구성 요소 라이브러리를 만듭니다. Bundler에 적합한 ES 모듈 ( dist/lib/<your-lib>.js ), 미니스트 ES 모듈 ( dist/lib/<your-lib>.min.js ) 및 일반 UMD 스크립트 ( dist/lib/<your-lib>.umd.js )에 적합합니다.

package.json 의 prepublishOnly 스크립트 항목 덕분에 npm publish 실행할 때 빌드는 자동으로 호출됩니다.

메모 및 제한

이 템플릿은 이전 브라우저 지원을위한 웹 구성 요소 폴리 필을 제공하지 않습니다. 일반적으로 해당 작업을 호스트 응용 프로그램에 맡기는 것이 가장 좋습니다.

소품

웹 구성 요소에서 허용되는 모든 소품은 자동으로 요소 속성으로 변환됩니다. Camelcase 또는 Pascalcase는 HTML에서 작동하지 않으므로 소문자 이름을 소문자로 지정해야합니다.

 < script >
  export let myvalue = "Default" ;
</ script >

이벤트

on:myevent 와 같은 이벤트를 듣기위한 Svelte Syntax 이벤트는 Svelte 웹 구성 요소 (#3119)에서 발송 된 이벤트와 함께 작동하지 않습니다.

CustomEvent 만들고 파견하여 해결 방법을 사용해야합니다.

예는 다음과 같습니다.

// MyComponent.wc.svelte
< svelte:options tag =" my-component " />
< script >
  import { get_current_component } from "svelte/internal" ;
  const component = get_current_component ( ) ;
  
  // example function for dispatching events
  const dispatchEvent = ( name , detail ) =>
    component . dispatchEvent ( new CustomEvent ( name , { detail } ) ) ;
</ script >
< button on:click = {() = > dispatchEvent("test", "Hello!")} >
  Click to dispatch event
</ button > 

각 구성 요소를 자체 모듈로 구축합니다

기본적 으로이 템플릿은 모든 구성 요소를 단일 모듈로 빌드합니다.

각 구성 요소를 자체 모듈로 빌드하는 것을 선호하는 경우 환경 변수 BUNDLE_COMPONENTS false 로 설정하거나 vite.config.js 편집하고 bundleComponents 옵션을 false 로 설정하여 그렇게 할 수 있습니다.

그런 다음 packages/lib/index.ts 의 내용을 다음과 같이 교체해야합니다.

 export default ( ) => {
  import ( './MyComponent.wc.svelte' ) ;
  // Import each of your component this way
} ;

이렇게하면 코드 분할이 가능하며 dist/lib/ 폴더의 각 구성 요소에 대한 ES 모듈이 생성됩니다.

구성 요소가 내보내는 방식을 변경하면 import '../../lib'; demo/src/App.svelte in import '../../lib/MyComponent.wc.svelte'; .

TS 템플릿에서 allowJs 활성화하는 이유는 무엇입니까?

allowJs: false 실제로 프로젝트에서 .js 파일의 사용을 방해하지만 .svelte 파일에서 JavaScript 구문의 사용을 방해하지는 않습니다. 또한 checkJs: false 강요하고 두 세계의 최악을 가져옵니다. 전체 코드베이스를 보장 할 수없고 기존 JavaScript에 대해서는 타이 테크를 더 악화시킵니다. 또한 혼합 코드베이스가 관련 될 수있는 유효한 사용 사례가 있습니다.

HMR이 내 지역 구성 요소 상태를 보존하지 않는 이유는 무엇입니까?

HMR 주 보존은 많은 gotchas와 함께 제공됩니다! 종종 놀라운 행동으로 인해 svelte-hmr 및 @sveltejs/vite-plugin-svelte 에서 기본적으로 비활성화되었습니다. 여기에서 세부 사항을 읽을 수 있습니다.

구성 요소 내에서 유지하는 것이 중요한 상태가있는 경우 HMR로 교체되지 않는 외부 상점을 만드는 것을 고려하십시오.

 // store.ts
// An extremely simple external store
import { writable } from 'svelte/store'
export default writable ( 0 )