zola vite demo

โซล่า + วีเต้ เดโม่

นี่เป็นการสาธิตการทำงานขั้นต่ำที่แสดงให้เห็นว่าคุณสามารถเชื่อมต่อ Zola กับ Vite ได้อย่างราบรื่นโดยไม่ต้องใช้ปลั๊กอินพิเศษ

• Zola เป็นเครื่องมือสร้างไซต์แบบสแตติกที่เรียบง่ายและชาญฉลาด ซึ่งใช้กลไกเทมเพลต Tera ที่มีไวยากรณ์เหมือน Jinja2/Twig
• Vite เป็นเครื่องมือสร้างส่วนหน้าที่คล้ายคลึงกับ Webpack แต่กำหนดค่าได้ง่ายกว่า

โปรดทราบว่านี่ ไม่ใช่ โครงการเริ่มต้นหรือแบบสำเร็จรูป

ในการสาธิตนี้:

• Zola รับผิดชอบการประมวลผล HTML, Vite รับผิดชอบการประมวลผล JS และ SASS หากคุณต้องการให้ Zola ประมวลผล SASS แทนที่จะเป็น Vite การกำหนดค่านั้นไม่ใช่เรื่องเล็กน้อย (ดูเอกสารของ Zola และความคิดเห็นของฉันใน main.js)
• เซิร์ฟเวอร์การพัฒนา Zola และ Vite ทำงานเคียงข้างกัน
• Hot reload ใช้งานได้กับโค้ด HTML, JS, SASS
• คำสั่งพร้อมใช้งานผ่าน npm run (ดูที่ package.json)
• การสร้างการผลิตจะถูกย่อให้เล็กลง: Zola ย่อขนาด HTML, Vite ย่อขนาด JS และ CSS

วิธีใช้

1. โคลน repo และ cd ลงในไดเร็กทอรี
2. รัน npm install เพื่อติดตั้งการพึ่งพา
3. รัน npm run dev เพื่อรันเซิร์ฟเวอร์ Zola และ Vite dev
4. เปิด http://127.0.0.1:1111/ ในเบราว์เซอร์ของคุณ คุณควรเห็นหน้าที่ระบุว่า “ยินดีต้อนรับสู่ Zola + Vite demo” และ Hello world! ในคอนโซลของเบราว์เซอร์ (เช่นในภาพหน้าจอด้านบน)
5. ทำการเปลี่ยนแปลงบางอย่างกับ templates/index.html หรือ js/main.js หรือ sass/main.scss หน้าที่ http://127.0.0.1:1111/ ควรอัปเดตทันทีโดยมีการเปลี่ยนแปลงของคุณเกิดขึ้น
6. รัน npm run build เพื่อสร้างสำหรับการใช้งานจริง (ไฟล์จะไปที่ public/ directory)

ปัญหาที่ทราบ

1. ฉันยังไม่ได้ทดสอบการสาธิตบน Windows
2. เอกสาร Vite บอกว่ารายการควรมี import 'vite/modulepreload-polyfill' แต่ฉันไม่แน่ใจเกี่ยวกับวัตถุประสงค์ของมัน (ดู main.js)
3. หาก http://localhost:3000/@vite/client ให้ 404 แก่คุณ คุณต้องเปิด http://127.0.0.1:1111/ ก่อน หากยังไม่ได้ผลให้ดูสิ่งนี้

ข้อเสนอแนะคำถาม?

แค่เปิดประเด็น.. โปรดทราบว่าปัญหาที่ไม่เกี่ยวข้องกับวัตถุประสงค์ของพื้นที่เก็บข้อมูลนี้จะถูกทำเครื่องหมายว่าปิดแล้ว