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