ดาวน์โหลด unplugin svelte components - unplugin svelte components ซอร์สโค้ดดาวน์โหลดซอร์สโค้ดดาวน์โหลด

unplugin svelte components

ส่วนประกอบของบุคคลที่สาม

1.0.0

ดาวน์โหลด

ส่วนประกอบของถอดปลั๊ก-เวลต์

ส่วนประกอบตามความต้องการการนำเข้าอัตโนมัติสำหรับ Svelte

การสาธิต sveltekit svelte vite demo

คุณสมบัติ

⚡รองรับ Vite, Webpack, Rollup, Esbuild และอีกมากมายขับเคลื่อนโดย Unplugin
- ต้นไม้สั่นคลอนมีเพียงการลงทะเบียนส่วนประกอบที่คุณใช้
- ชื่อโฟลเดอร์เป็นเนมสเปซ
- การรองรับ typescript แบบเต็ม
- ทำงานได้อย่างสมบูรณ์แบบด้วย 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 สำหรับส่วนประกอบที่นำเข้าอัตโนมัติคุณสามารถเปลี่ยนการกำหนดค่าได้ตามที่ได้รับการสนับสนุน

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

เมื่อการตั้งค่าเสร็จสิ้นแล้ว components.d.ts จะถูกสร้างขึ้นและอัปเดตโดยอัตโนมัติด้วยคำจำกัดความประเภท อย่าลังเลที่จะมอบมันให้เป็น Git หรือไม่ตามที่คุณต้องการ

ตรวจสอบให้แน่ใจว่าคุณเพิ่ม components.d.ts ลงใน tsconfig.json ของคุณภาย includes

ส่วนประกอบของบุคคลที่สามที่ลงทะเบียน

มันเจ๋งที่มีส่วนประกอบของคุณเองนำเข้า แต่บางครั้งคุณต้องการนำเข้าส่วนประกอบของบุคคลที่สาม

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')
  }

} )