antedate

이전

정적 웹사이트를 쉽게 사전 렌더링하세요.

Antedate는 Chrome pupeteer를 사용하여 클라이언트 측 웹사이트를 사전 렌더링하는 간단한 API 및 CLI입니다. 자동으로 로컬 서버를 가동하고 제공된 각 경로를 렌더링합니다.

설치하다

 $ 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

모듈에는 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

API

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 ( ) } ) ; 

신용 거래

아이디어와 논리는 Luke Edwards의 PWA 코드를 기반으로 합니다. @pwa/cli의 build.js에서 원래 구현을 참조하세요.

특허

MIT 라이센스 @ Terkel Gjervig