antedate

ล่วงหน้า

เรนเดอร์เว็บไซต์คงที่ล่วงหน้าได้อย่างง่ายดาย

Antedate เป็น API และ CLI แบบธรรมดาที่ใช้ Chrome Pupeteer เพื่อเรนเดอร์เว็บไซต์ฝั่งไคลเอ็นต์ล่วงหน้า โดยจะหมุนเซิร์ฟเวอร์ภายในเครื่องโดยอัตโนมัติและแสดงผลแต่ละเส้นทางที่ให้ไว้

ติดตั้ง

 $ npm install antedate

การใช้งาน

คุณสามารถใช้ API หรือ CLI ก็ได้

 $ antedate render -r /home -r /about

 import antedate from 'antedate'

const routes = [ '/' , '/about' , '/contact' ] ;
const site = './site' ;

await antedate ( site , routes ) ;
// => [
//      { html: '....', route: '/', path: '/index.html' },
//      { html: '....', route: '/about', path: '/about.html' }
//      ...
// ]

await antedate ( site , routes , { headless : false , dirs : true } ) ;
// => [
//      { html: '....', route: '/', path: '/index.html' },
//      { html: '....', route: '/about', path: '/about/index.html' }
//      ...
// ] 

คลีไอ

โมดูลยังมาพร้อมกับ CLI

  Description
    Pre-render the routes given

  Usage
    $ antedate render [options]

  Options
    -s, --selector    Wait for the following selector before rendering
    -w, --wait        MS to wait before saving page. Happens after selector wait
    -r, --route       Prerender the route specified
    -d, --dir         Directory containing the static site  (default .)
    -o, --output      Output directory  (default ./static)
    -h, --help        Displays this message

  Examples
    $ antedate render -r /home -r /about

เอพีไอ

antedate (รูท, เส้นทาง, ตัวเลือก?)

ส่งคืน: Array

ส่งกลับฟังก์ชันการแสดงผลที่จะยอมรับค่า date ที่เป็นอาร์กิวเมนต์เดียวหรือไม่ก็ได้

ราก

ประเภท: String
จำเป็น: true

เส้นทางไปยังไดเร็กทอรีที่มีไซต์คงที่เพื่อแสดงผลล่วงหน้า Antedate จะเริ่มต้นเซิร์ฟเวอร์ภายในเครื่องโดยอัตโนมัติ

เส้นทาง

ประเภท: Array
จำเป็น: true

อาร์เรย์ของเส้นทางที่จะแสดงผล รูท / จะถูกเรนเดอร์ครั้งสุดท้ายเสมอ เช่น ['/about', '/contact', '/']

เลือก

ประเภท: Object
จำเป็น: false

ไม่มีหัว

ประเภท: Boolean
ค่าเริ่มต้น: false

ควรจะวิ่งเชิดหุ่นในโหมดหัวขาด

ตัวเลือก

ประเภท: String
ค่าเริ่มต้น: ``

รอให้ selector ปรากฏขึ้นก่อนที่จะเรนเดอร์ไซต์ เช่น body.prerender

รอ

ประเภท: Number
ค่าเริ่มต้น: ``

มิลลิวินาทีก่อนที่จะเรนเดอร์ไซต์

OBS: สิ่งนี้จะเกิดขึ้นหลังจากตัวเลือกตัวเลือกหากมีให้ทั้งสองตัวเลือก

สคริปต์

ประเภท: Function
ค่าเริ่มต้น: ``

ฟังก์ชันโทรกลับเพื่อดำเนินการบนเพจก่อนการเรนเดอร์จะเกิดขึ้น

มัณฑนากร

ประเภท: Function
ค่าเริ่มต้น: ``

ฟังก์ชันมัณฑนากรที่ช่วยให้คุณสามารถจัดการสตริง HTML ที่แสดงผลได้

 await antedate ( site , routes , { decorator : html => html . toUpperCase ( ) } ) ; 

เครดิต

แนวคิดและตรรกะนั้นมาจากโค้ดจาก PWA โดย Luke Edwards ดูการใช้งานดั้งเดิมใน build.js ใน @pwa/cli

ใบอนุญาต

ใบอนุญาต MIT @ Terkel Gjervig