@frontj/builder

frontJでHTMLファイルを書き出す際に有用なパッケージです。

Install

npm install -D @frontj/builder

Example

import { div } from '@frontj/elements'
import { build, generateRoutes } from '@frontj/builder'

const posts = [
  {
    id: 1,
    content: 'post1'
  },
  {
    id: 2,
    content: 'post2'
  },
  {
    id: 3,
    content: 'post3'
  }
]

build({
  outDir: 'public',
  routes: {
    '/': div('top'),
    ...generateRoutes(posts, (post) => {
      return [`/posts/${post.id}/`, div(post.content)]
    })
  }
})

Documentation

Methods

build

ファイルを書き出します。

build(options: FrontJBuildOptions): void

| 引数 | 説明 | | --- | --- | | options | 各種オプション設定用オブジェクト。設定項目はFrontJBuildOptions型の項目に記載しています。 |

generateRoutes

配列からFrontJRoutes型のオブジェクトを生成するメソッドです。FrontJBuildOptions型のroutesプロパティに値を設定する際に有用です。

generateRoutes<T>(array: T[], callback: (item: T, index: number) => [string, string]): FrontJRoutes

| 引数 | 説明 | | --- | --- | | array | オブジェクトを生成する元となる配列。 | | callback | arrayの各要素とそのインデックスを引数に受け取る関数。[`出力先のパス`, `ファイルの内容`]の形をした配列を返す必要があります。 |

Types

FrontJBuildOptions

buildメソッドのoptions引数の型として使用されます。

FrontJBuildOptions {
  outDir?: string;
  routes: FrontJRoutes;
}

| 引数 | 説明 | | --- | --- | | outDir | 出力先ディレクトリ名。省略すると'dist'になります。出力の際、outDir以下のHTMLファイルは削除されます(HTML以外のファイルは残されます)。 | | routes | ルート設定用オブジェクト。詳細はFrontJRoutes型の項目に記載しています。 |

FrontJRoutes

FrontJBuildOptions型のroutesプロパティの型として使用されます。

FrontJRoutes {
  [route: string]: string;
}

| 引数 | 説明 | | --- | --- | | route | 出力先のパス。/foo/bar/(または/foo/bar)とすると/foo/bar/index.htmlが出力されます。/foo/bar.htmlとするとHTMLファイルを作成することができます。このプロパティの値がHTMLファイルに書き込まれます。 |

License

MIT