biti

npm i biti -g

켈 이 repo는 @rola/static 및 rola 프로젝트에 찬성하여 더 이상 사용되지 않습니다.

특징

• 쉬운 정적 페이지 생성
• 지능형 파일 시청
• 편리한 CLI
• 쉬운 노드 API

용법

biti watch pages/ static/

시작하기

biti 매우 간단합니다. biti 페이지를 렌더링하는 데 사용하는 속성 및 방법을 각각 정의하고 내보내는 단일 페이지 디렉토리에서 작동합니다.

여기의 예는 /pages 페이지 디렉토리로 사용하지만 무엇이든 호출 할 수 있습니다.

페이지 구성

각 페이지에는 다음 수출이 필요합니다.

• pathname -String- 페이지가 나타나기를 원하는 경로
• view - 함수 - 반응 구성 요소를 반환하는 함수

PathName 속성은 view 구성 요소로 전달됩니다.

간단한 페이지는 다음과 같습니다.

 import React from 'react'

export const pathname = '/about'

export function view ( { pathname } ) {
  return (
    < >
      < h1 > About Us </ h1 >
      < p > ... </ p >
    </ >
  )
} 

정적 데이터

페이지는 state 객체를 내보낼 수 있으며 렌더링 할 때도 view 기능으로 전달됩니다.

 import React from 'react'

export const pathname = '/about'

export const state = {
  title : 'About Us' ,
  description : '...'
}

export function view ( { state , pathname } ) {
  return (
    < >
      < h1 > { state . title } </ h1 >
      < p > { state . description } </ p >
    </ >
  )
} 

데이터로드

데이터가 필요한 경로 또는 동적 특성이 필요한 경로는 위에 나열된 동일한 속성을 포함하는 페이지 구성을 반환하는 config 기능을 정의 할 수 있습니다.

이 값은 정적 수출이 제공된 모든 것과 깊이 병합 될 것입니다.

 import React from 'react'
import { getAboutPage } from './lib/api.js'

export const pathname = '/about'

export const state = {
  title : 'About Us' ,
  team : [
    'Eric'
  ]
}

export function config ( ) {
  return getAboutPage ( )
    . then ( res => {
      return {
        state : {
          team : res . team
        }
      }
    } )
}

export function view ( { state , pathname } ) {
  return (
    < >
      < h1 > { state . title } </ h1 >

      < h2 > Team </ h2 >

      { state . team . map ( name => (
        < p key = { name } > { name } </ p >
      ) ) }
    </ >
  )
} 

로드 된 데이터에서 페이지를 생성합니다

생성 페이지 및 페이지 매김의 경우 config 함수는 다양한 페이지 구성을 반환 할 수 있습니다 . 이러한 각 구성은 각 페이지가 별도로 렌더링되도록 자체 pathname 정의해야합니다.

다음 예제는 getBlogPosts 에서 반환 된 각 게시물에 대한 페이지를 생성합니다.

 import React from 'react'
import { getBlogPosts } from './lib/api.js'

export function config ( ) {
  return getBlogPosts ( )
    . then ( posts => {
      return posts . map ( post => ( {
        pathname : `/posts/ ${ post . slug } ` ,
        state : {
          title : post . title ,
          content : post . content
        }
      } ) )
    } )
}

export function view ( { state , pathname } ) {
  return (
    < >
      < h1 > { state . title } </ h1 >

      < article >
        { state . content }
      </ article >
    </ >
  )
} 

구성

biti 최소 구성을 지원하며 그렇지 않으면 스마트 기본값으로 돌아갑니다. 모든 렌더링 작업에 대한 구성을 정의하려면 biti.config.js 파일을 만들 수 있습니다.

biti 구성 파일에서 다음 속성을 지원합니다.

• env -Object-이 객체의 속성은 process.env 에 첨부되며 컴파일 내에 전 세계적 으로 정의됩니다.
• alias - 객체 - 모듈 가져 오기 별명

예:

 module . exports = {
  env : {
    API_KEY : 'abcdefg'
  } ,
  alias : {
    components : './src/components'
  }
} 

기본 구성

기본적으로 biti process.cwd() 를 가리키는 단일 @ 을 정의합니다. 다음과 같이 템플릿 전체에서 사용할 수 있습니다.

 import Component from '@/src/components/Component.js' 

클리

biti 에는 render 과 watch 의 두 가지 명령 만 있습니다.

둘 다 같은 패턴을 따릅니다.

biti < command > < src > < dest >

예를 들어:

biti render /pages /static

이 명령은 또한 Globs를 src 속성으로 허용하므로 개별 페이지 또는 디렉토리를 지정할 수 있습니다.

biti render /pages/about-us.js /static
biti render /pages/ * .js /static
biti render /pages/marketing-site/ * .js /static
biti render /pages/ ** / * .js /static

API

biti 프로그래밍 방식으로 사용하는 것은 CLI를 사용하는 것과 사실상 동일하며 구성 객체를 수동으로 전달하면됩니다.

 const biti = require ( 'biti' )

const config = {
  env : { ... } ,
  alias : { ... }
}

const app = biti ( config )

render 와 watch 다음과 같은 서명을 가지고 있습니다.

 app . render ( src , dest ) 

세우다

src dest 의 모든 페이지를 렌더링합니다.

 app . render ( '/src' , '/static' ) 

보다

src 의 모든 페이지를 시청하고 파일 변경에 dest 렌더링됩니다.

 app . watch ( '/src' , '/static' )

API 이벤트

biti 인스턴스는 몇 가지 유용한 이벤트를 방출합니다.

세우다

단일 페이지를 렌더링 한 후.

 app . on ( 'render' , page => { } ) 

렌더링

모든 페이지를 렌더링 한 후. 시계에서는 모든 변경 사항이 컴파일되고 렌더링 된 후에도 호출됩니다.

 app . on ( 'rendered' , pages => { } ) 

오류

 app . on ( 'error' , error => { } ) 

특허

MIT 라이센스 © Eric Bailey