อัลไพน์.js

ไปที่เอกสารอัลไพน์สำหรับเกือบทุกอย่าง: เอกสารอัลไพน์

คุณสามารถส่งการอัปเดตไปยังเอกสารได้โดยส่ง PR ไปที่ repo นี้ เอกสารจะอยู่ในไดเร็กทอรี /packages/docs

อยู่ที่นี่เพื่อดูข้อมูลที่เกี่ยวข้องกับการบริจาค

กำลังมองหาเอกสาร V2 อยู่ใช่ไหม? พวกเขาอยู่ที่นี่

รูปแบบองค์ประกอบอัลไพน์

คู่มือการบริจาค:

เริ่มต้นอย่างรวดเร็ว

โคลน repo นี้ในเครื่อง
รัน npm install และ npm run build
รวมไฟล์ /packages/alpinejs/dist/cdn.js จากแท็ก <script> บนหน้าเว็บ เท่านี้คุณก็พร้อมแล้ว!

ทัวร์สั้นๆ

คุณสามารถติดตั้งทุกสิ่งได้ด้วย: npm install ในไดเร็กทอรีรากของ repo นี้หลังจากทำการโคลนในเครื่อง

repo นี้เป็น "mono-repo" โดยใช้พื้นที่ทำงาน npm สำหรับจัดการแพ็คเกจ แต่ละแพ็คเกจมีโฟลเดอร์ของตัวเองในไดเร็กทอรี /packages

แทนที่จะต้องรันบิลด์แยกกันสำหรับแต่ละแพ็คเกจ บันเดิลแพ็คเกจทั้งหมดจะถูกจัดการด้วยคำสั่งเดียวกัน: npm run build

ต่อไปนี้เป็นข้อมูลสรุปของแต่ละแพ็คเกจใน repo นี้:

บรรจุุภัณฑ์	คำอธิบาย
อัลไพน์เจส	repo อัลไพน์หลักพร้อมแกนกลางของอัลไพน์ทั้งหมด
ทรุด	ปลั๊กอินสำหรับการขยายและยุบองค์ประกอบโดยใช้ภาพเคลื่อนไหวที่ราบรื่น
ซีเอสพี	การซื้อคืนเพื่อจัดเตรียมโครงสร้าง "CSP ปลอดภัย" ของ Alpine
เอกสาร	เอกสารอัลไพน์
จุดสนใจ	ปลั๊กอินที่ช่วยให้คุณจัดการโฟกัสภายในองค์ประกอบได้
ประวัติศาสตร์	ปลั๊กอินสำหรับการเชื่อมโยงข้อมูลเพื่อสอบถามพารามิเตอร์สตริงโดยใช้ API ประวัติ (ชื่อมีแนวโน้มที่จะเปลี่ยนแปลง)
ตัด	ปลั๊กอินสำหรับทริกเกอร์นิพจน์ JS ตามองค์ประกอบที่ตัดกับวิวพอร์ต
หน้ากาก	ปลั๊กอินสำหรับจัดรูปแบบช่องป้อนข้อความโดยอัตโนมัติตามที่ผู้ใช้พิมพ์
มอร์ฟ	ปลั๊กอินสำหรับปรับเปลี่ยน HTML (เช่น morphdom) ภายในหน้าอย่างชาญฉลาด
ยังคงอยู่	ปลั๊กอินสำหรับคงสถานะอัลไพน์ไว้ตลอดการโหลดหน้าเว็บ

ไฟล์ JS ที่คอมไพล์แล้ว (เป็นผลมาจากการรัน npm run [build/watch] ) ที่จะรวมเป็นแท็ก <script> เป็นต้น จะถูกเก็บไว้ในไดเร็กทอรี packages/[package]/dist ของแต่ละแพ็คเกจ

อย่างน้อยแต่ละแพ็คเกจควรมี: โครงสร้าง "cdn" ที่กำลังเริ่มต้นได้เองและสามารถรวมไว้ได้โดยใช้แอตทริบิวต์ src ในแท็ก <script defer> และไฟล์ module.[esm/cjs].js ที่ใช้สำหรับการนำเข้า เป็นโมดูล JS (cjs สำหรับโหนด, esm สำหรับทุกสิ่งทุกอย่าง)

การรวมกลุ่มสำหรับ Alpine V3 ได้รับการจัดการโดย ESBuild แต่เพียงผู้เดียว การกำหนดค่าทั้งหมดสำหรับบิลด์เหล่านี้ถูกจัดเก็บไว้ในไฟล์ scripts/build.js

การทดสอบ

มีเครื่องมือทดสอบ 2 แบบที่ใช้ใน repo นี้: Cypress (สำหรับการทดสอบการรวม) และ Jest (สำหรับการทดสอบหน่วย)

การทดสอบทั้งหมดจะถูกจัดเก็บไว้ในโฟลเดอร์ /tests ใต้ /tests/cypress และ /tests/jest

คุณสามารถรันทั้งสองอย่างได้จากบรรทัดคำสั่งโดยใช้: npm run test

หากคุณต้องการรัน cypress เท่านั้นและเปิดอินเทอร์เฟซผู้ใช้ (แนะนำในระหว่างการพัฒนา) คุณสามารถเรียกใช้: npm run cypress

หากคุณต้องการรันการทดสอบ Jest เท่านั้น คุณสามารถรัน npm run jest เหมือนกับการทดสอบปกติและกำหนดเป้าหมายเฉพาะการทดสอบ คุณสามารถระบุตัวเลือกการกำหนดค่าบรรทัดคำสั่งเพื่อส่งต่อไปยังคำสั่ง jest ด้วย -- เช่น: npm run jest -- --watch

ขยาย

ข้อมูลเพิ่มเติม