unplugin svelte components 다운로드 unplugin svelte components 소스 코드 다운로드

unplugin svelte components

타사 구성 요소

1.0.0

다운로드

플러그 핀 스벨 트 성분

Svelte 용 주문형 구성 요소 자동 가져옵니다.

Sveltekit 데모 Svelte Vite 데모

특징

⚡️는 vite, webpack, rollup, esbuild 등을 지원합니다.
? 나무가 흔들리는 것은 사용하는 구성 요소 만 등록합니다.
? 폴더 이름은 네임 스페이스로 이름을 지정합니다.
? 전체 타입 지원.
? Unplugin-Auto-Import와 완벽하게 작동합니다.

설치

pnpm add -D unplugin-svelte-components

vite

 // vite.config.ts
import Components from 'unplugin-svelte-components/vite'

export default defineConfig ( {
  plugins : [
    Components ( { /* options */ } ) ,
  ] ,
} )

롤업

 // rollup.config.js
import Components from 'unplugin-svelte-components/rollup'

export default {
  plugins : [
    Components ( { /* options */ } ) ,
  ] ,
}

웹 팩

 // webpack.config.js
module . exports = {
  /* ... */
  plugins : [
    require ( 'unplugin-svelte-components/webpack' ) ( { /* options */ } ) ,
  ] ,
}

Esbuild

 // esbuild.config.js
import { build } from 'esbuild'

build ( {
  /* ... */
  plugins : [
    require ( 'unplugin-svelte-components/esbuild' ) ( {
      /* options */
    } ) ,
  ] ,
} )

Sveltekit

 // vite.config.ts
import Components from 'unplugin-svelte-components/vite'

export default defineConfig ( {
  plugins : [
    Components ( { /* options */ } ) , // before sveltekit plugin
    sveltekit ( ) ,
  ] ,
} )

용법

일반적으로 구성 요소를 사용하면 주문형 구성 요소를 가져 오며 더 이상 import 가 필요하지 않습니다!

자동으로 이것을 돌립니다

 < HelloWorld msg =" Hello Svelte " />

이것으로

 < HelloWorld msg =" Hello Svelte " />

< script >
import HelloWorld from './src/components/HelloWorld.svelte'
</ script >

TypeScript

자동 절제된 구성 요소에 대한 TypeScript 지원을 얻으려면 지원을 얻기 위해 다음과 같이 구성을 변경할 수 있습니다.

 Components ( {
  dts : true , // enabled by default if `typescript` is installed
} )

설정이 완료되면 components.d.ts 생성되고 유형 정의로 자동으로 업데이트됩니다. 원하는대로 git에 자유롭게 커밋하십시오.

includes 에서 tsconfig.json 에 components.d.ts 추가하십시오.

등록 된 타사 구성 요소

자신의 구성 요소를 가져 오는 것은 멋지지만 때때로 타사 구성 요소를 가져 오려는 것이 좋습니다.

따라서 unplugin-svelte-components 이러한 구성 요소를 가져 오는 방법을 제공했습니다.

 Components ( {
  dts : true ,
  external : [
    {
      from : "agnostic-svelte" , // import from third party
      names : [ // import these components
        "Alert" ,
        "Button as AButton" , // import as `AButton`
      ] ,
      defaultImport : false , // telling `unplugin-svelte-components` to import any component as non-default export
    } ,
  ] ,
} )

따라서 Alert 와 AButton 사용할 수 있습니다.

비활성화

경우에 따라 페이지에서 자동 임금을 비활성화 할 수 있습니다. unplugin-svelte-components  추가하여이를 수행하는 방법을 제공합니다 .

 <!-- unplugin-svelte-components disabled -->
< HelloWorld msg =" Hello Svelte " />

구성

다음은 구성의 기본값을 보여줍니다

 Components ( {
  // relative paths to the directory to search for components.
  dirs : [ 'src/components' ] ,

  // valid file extensions for components.
  extensions : [ 'svelte' ] ,

// search for subdirectories
  deep : true ,

  // generate `components.d.ts` global declarations,
  // also accepts a path for custom filename
  // default: `true` if package typescript is installed
  dts : false ,

  // Allow subdirectories as namespace prefix for components.
  directoryAsNamespace : false ,
  // Subdirectory paths for ignoring namespace prefixes
  // works when `directoryAsNamespace: true`
  globalNamespaces : [ ] ,

  // Transform path before resolving
  importPathTransform : v => v ,

  // Allow for components to override other components with the same name
  allowOverrides : false ,

  // Accept a svelte pre-processor (e.g. svelte-preprocess)
  preprocess :  null ,

  // filters for transforming targets
  include : [ / .svelte$ / , / .svelte?svelte / ] ,
  exclude : [ / [\/]node_modules[\/] / , / [\/].git[\/] / , / [\/].svelte-kit[\/] / , ] ,

  // Generate corresponding .eslintrc-components.json file.
  // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
  eslintrc : {
    enabled : true , // Default `true`
    filepath : './.eslintrc-components.json' , // Default `./.eslintrc-components.json`
    globalsPropValue : true , // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
  }

} )