biti

npm i biti -g

ショ和このレポは、 @Rola/StaticとRola Projectを支持して非推奨されています。

特徴

• 簡単な静的ページ生成
• インテリジェントファイルウォッチング
• 便利なCLI
• 簡単なノードAPI

使用法

biti watch pages/ static/

はじめる

bitiとても簡単です。ページの単一のディレクトリで動作します。これは、 bitiページをレンダリングするために使用するプロパティとメソッドを定義およびエクスポートします。

ここの例については、 /pagesページディレクトリとして使用しますが、何でも呼び出すことができます。

ページの構成

各ページでは、次のエクスポートが必要です。

• pathname文字列 - ページを表示したいパス
• 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オブジェクト - このオブジェクト上のプロパティは、 process.envに添付され、コンパイル内でグローバルに定義されます。
• alias - オブジェクト - モジュールインポートエイリアス

例：

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

デフォルトの構成

デフォルトでは、 biti process.cwd()を指す単一のエイリアス@を定義します。このようなテンプレート全体で使用できます。

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

cli

biti 2つのコマンドしかありません： renderとwatch 。

どちらも同じパターンに従います。

biti < command > < src > < dest >

例えば：

biti render /pages /static

これらのコマンドは、グローブを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