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

應用程式介面

先行日期（根、路線、選項？）

傳回： Array

傳回一個渲染函數，函數可以選擇接受date值作為其唯一參數。

根

類型： String
必填： true

包含要預先渲染的靜態網站的目錄路徑。 Antedate 自動啟動本機伺服器。

路線

類型： Array
必填： true

要渲染的路線數組。根/總是最後呈現。例如['/about', '/contact', '/'] 。

選擇

類型： Object
必填： false

無頭的

類型： Boolean
預設值： false

是否以無頭模式運行 puppeteer。

選擇器

類型： String
預設值：``

在渲染網站之前等待selector出現。例如body.prerender 。

等待

類型： Number
預設值：``

渲染站點之前的毫秒數。

OBS：如果都提供了選擇器選項，則會在選擇器選項之後發生。

腳本

類型： Function
預設值：``

在渲染發生之前在頁面上執行的回呼函數。

裝飾者

類型： Function
預設值：``

一個裝飾器函數，允許您操作渲染的 HTML 字串。

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

信用

這個想法和邏輯是基於 Luke Edwards 的 PWA 代碼。請參閱@pwa/cli 中的 build.js 中的原始實作。

執照

麻省理工學院許可證@Terkel Gjervig