หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ส่วนประกอบของบุคคลที่สาม
ดาวน์โหลด

svelte-web-components-template

เทมเพลตพื้นฐานสำหรับการสร้างไลบรารีส่วนประกอบเว็บที่แชร์ได้โดยใช้ Vite, Svelte และ TypeScript

เทมเพลตนี้สร้างส่วนประกอบของเว็บวานิลลามากกว่าที่จะใช้กับ HTML ธรรมดาหรือภายในกรอบสำคัญใด ๆ เช่น React, Angular, Vue หรือ Svelte (ดูความเข้ากันได้)

วิธีใช้เทมเพลตนี้

คุณสามารถสร้าง Repo 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/ โฟลเดอร์ซึ่งคุณสามารถใช้และทดสอบส่วนประกอบเว็บของคุณในระหว่างการพัฒนา

หากคุณต้องการการทดสอบหน่วยคุณสามารถดูไลบรารีการทดสอบตลกและตลก

การใช้ส่วนประกอบเว็บที่สร้างขึ้นด้วยแอพสาธิต

แอปพลิเคชันตัวอย่างมีไว้สำหรับการพัฒนาและทดสอบส่วนประกอบของคุณนั่นคือเหตุผลที่นำเข้าไฟล์ .svelte จาก lib/ โฟลเดอร์โดยตรงโดยค่าเริ่มต้น

หากคุณต้องการคุณสามารถนำเข้าส่วนประกอบของเว็บที่สร้างขึ้นจาก dist/ Folder แทนโดยการแก้ไข demo/src/App.svelte และแทนที่ import '../../lib'; คำสั่งพร้อม import '../../../dist/lib'; หากคุณเปิดใช้งานตัวเลือก bundleComponents หรือนำเข้าส่วนประกอบของคุณด้วย import import '../../dist/MyComponent.wc.js'; มิฉะนั้น.

คุณจะต้องตรวจสอบให้แน่ใจว่าได้เรียกใช้สคริปต์ npm run build เพื่อสร้าง dist/lib/ โฟลเดอร์ก่อน

การสร้างห้องสมุด

คำสั่ง npm run build จะสร้างไลบรารี Web Components ใน dist/lib/ Folder มันสร้างทั้งโมดูล ES ( dist/lib/<your-lib>.js ) เหมาะสำหรับ Bundler (ไม่ได้กำหนด) โมดูล ES ที่ย่อมาจาก minified ( dist/lib/<your-lib>.min.js ) และสคริปต์ UMD ปกติ ( dist/lib/<your-lib>.umd.js )

บิลด์จะถูกเรียกโดยอัตโนมัติเมื่อดำเนินการ npm publish เพื่อแจกจ่ายห้องสมุดของคุณด้วยรายการสคริปต์ prepublishOnly ใน package.json

หมายเหตุและข้อ จำกัด

เทมเพลตนี้ไม่ได้ให้โพลีฟิลล์ส่วนประกอบของเว็บสำหรับการรองรับเบราว์เซอร์รุ่นเก่า โดยปกติแล้วจะเป็นการดีที่สุดที่จะทิ้งงานนั้นไว้ในแอปพลิเคชันโฮสต์ดังนั้นทำไมพวกเขาถึงออกไป

อุปกรณ์ประกอบฉาก

อุปกรณ์ประกอบฉากใด ๆ ที่ได้รับการยอมรับจากองค์ประกอบเว็บของคุณจะถูกแปลงเป็นแอตทริบิวต์องค์ประกอบโดยอัตโนมัติ เนื่องจาก Camelcase หรือ Pascalcase ไม่ทำงานใน HTML คุณต้องตรวจสอบให้แน่ใจว่าได้ตั้งชื่ออุปกรณ์ประกอบฉากของคุณในตัวพิมพ์เล็ก 

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

เหตุการณ์

เหตุการณ์ Svelte Syntax สำหรับการฟังเหตุการณ์เช่น on:myevent ไม่ทำงานกับกิจกรรมที่ส่งมาจากองค์ประกอบเว็บ 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
} ;

สิ่งนี้จะเปิดใช้งานการแยกรหัสและจะสร้างโมดูล ES สำหรับแต่ละองค์ประกอบใน dist/lib/ โฟลเดอร์

เมื่อคุณเปลี่ยนวิธีการส่งออกส่วนประกอบคุณต้องเปลี่ยน import '../../lib'; คำสั่งใน demo/src/App.svelte ที่จะ import '../../lib/MyComponent.wc.svelte'; -

ทำไมเปิดใช้ allowJs ในเทมเพลต TS?

ในขณะที่ allowJs: false จะป้องกันการใช้ไฟล์ .js ในโครงการ แต่ก็ไม่ได้ป้องกันการใช้ไวยากรณ์ JavaScript ในไฟล์. .svelte นอกจากนี้มันจะบังคับให้ checkJs: false นำสิ่งที่เลวร้ายที่สุดของทั้งสองโลก: ไม่สามารถรับประกันได้ว่า codebase ทั้งหมดเป็น typeScript และยังมีการพิมพ์ที่แย่ลงสำหรับ 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 )
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด