stakit
v0.0.3
静的 Web サイトを構築するためのモジュール式ツールキット
Stakit は、汗をかくことなく静的 Web サイト用の強力なビルド パイプラインを作成できるフレームワークです。これは最小限でモジュール式であり、ストリームを使用し、Stakit ツールキットには使用できるプラグインと変換が多数含まれています。
Stakit はまだ開発初期段階ですが、実際に使ってみて、気にする必要があるかどうかを判断することができます。
フレームワークに依存しない: 文字列を出力できるあらゆるフレームワークで動作します。
module : 必要のないものを手に入れることはできませんが、 npm installはできます。
小さな API : コア メソッドが 7 つだけあり、そのうち使用する必要があるのは 3 つだけです
制約なし: 静的サイト ジェネレーターの機能やテンプレートに制限されることはありません。
高速でメモリ効率が高い: ストリームを多用する
npm i stakit
var stakit = require('stakit')var { レンダリング、ハイドレート } = require('stakit-choo')var app = require('.')var kit = stakit()
.routes(関数 (状態) {return [ '/' ]
})
.render(レンダー(アプリ))
.transform(水和物)kit.output(stakit.writeFiles('./public'))一般に、静的サイトを生成するときは 2 つのことを行います。
アプリにコンテンツを埋め込む
静的ファイルをコピーする
Javascript をバンドルしたり、CSS を変換したりするためのモジュール式 (そして素敵な) ツールがたくさんあります。Stakit も同様のものですが、サイト全体に対応しており、特に HTML ファイルに重点を置いています。
アプリのバンドルを処理し、必要に応じてバンドルを含める必要があります。 Choo の哲学に従い、小さく、わかりやすく、使いやすいものになっています。これは主に Choo で動作するように設計されていますが、他の同型フレームワークでも動作するはずです。
Stakit はコマンドラインからではなくプログラムによって呼び出されるため、必要に応じて Javascript ファイル ( build.jsなど) が必要になります。その後、 stakit()を使用してキットを初期化し、いくつかのメソッドを連鎖させることができます。
パイプラインには 2 つのメソッドが必要です。
routes(fn)
render(fn)
他のすべてのメソッドはオプションであり、次の順序で呼び出されます。
kit.use()によって適用されるすべてのミドルウェア
適用されたroutesReducer関数
すべてのルートについて:
適用されたrendererへの 1 回の呼び出し
すべてのtransform呼び出し
kit.output()でパイプラインを終了します。
このセクションでは、Sakit の各関数がどのように機能するかについてのドキュメントを提供します。技術的な参考にすることを目的としています。
kit = stakit()新しいkitインスタンスを初期化します。
kit.html(template, selector)開始 HTML テンプレートとセレクターを設定します。
kit.use(fn(context))ミドルウェア/プラグインをミドルウェア リストにプッシュします。汎用関数はルート生成前に実行されます。状態の変更からtransform stateのインストールまで、コンテキストを任意の方法で変更できます。
kit.use(関数 (ctx) {
ctx._transforms.push(変換)})詳細については、「ミドルウェア」を参照してください。
kit.routes(routeReducer(state)) routeReducer context.stateパラメータとして取得し、文字列/ルートのArrayを返す関数です。これらは、Stakit がrender呼び出すルートです。
kit.routes(関数 (状態) {
オブジェクト.キー(状態.コンテンツ)を返す
// または静的に
return [ '/'、'/about'、'/blog' ]})kit.render(renderer(route, state))ビルドのレンダラーを設定します。ここで魔法が起こります。 renderer routesによって返されるすべてのルートに対して呼び出されます。
次の値を持つオブジェクトを返す必要があります。
{
html: string, // レンダリングの結果
state: object // レンダリング後の状態 (オプション)}変換は、ここで返された更新された状態を受け取ります。
kit.transform(transformFn, opts)変換を変換のリストにプッシュします。 Stakit は、 documentifyとストリームを使用して HTML を構築します。
これらは、レンダリングされたコンテンツが HTML 内で置き換えられた後に呼び出されます。
詳細については、「変換」を参照してください。
kit.output(writerObject)ビルド パイプラインを開始し、すべてのルートをwriterObject.write({ destination, stream })に渡して終了します。すべてのファイル (ルートおよび静的) が完全に書き込まれるまで待機するPromiseを返します。
デフォルトでは、サイトを./publicディレクトリに出力する Writer を使用します。
詳細については、「ライター」を参照してください。
組み込みミドルウェア:
stakit.state(extendState) context.stateに値を追加するのに役立つユーティリティ
kit.use(stakit.state({ メッセージ: 'おはようございます!' }))stakit.copy(files)ファイルを出力ディレクトリにコピーするためのミドルウェア。
// ファイルを同じ場所にコピーしますkit.use(stakit.copy([ 'robots.txt' ]))// ファイルを出力パス内の別の場所にコピーしますkit.use(stakit.copy({
'ロボット.txt': 'ロボット.txt',
'sitemap.xml': 'sitemaps/sitemap.xml'}))Documentify非常に強力で、簡単にモジュール化できます。 Stakit 変換の一般的な形式は次のとおりです。
// functionfunction lang (context) {でラップされます。
// Documentify 変換を返します
return function (lang) {// 変換ストリームを返すreturn hstream({ html: { lang: lang } })
}}注: hstreamはとても良い友達です。
documentify変換は関数でラップされているため、 documentifyの API をいじることなく、必要なときにcontextを取得できます。これを回避したい場合は、単に関数からdocumentify変換を返すだけです。
Stakit に付属する変換については、 transforms/readme.mdを参照してください。
ライターは、生成され、変換された静的ファイルを出力します。これは、ファイル システムへの出力から Dat アーカイブへの保存までさまざまです。
ライターはメソッドwriteを実装する必要があります。生成されたページとcontext._filesに追加されたファイルを含むすべてのファイルに対して、ファイル オブジェクトを使用してwriter.write呼び出されます。パイプがフラッシュされた (ファイルが完全に書き込まれた) 後に返されるPromiseを返す必要があります。
ファイル オブジェクトは次のようになります。
{
source: null | string,
destination: string,
stream: Stream
}毎回ビルドする前に出力ディレクトリをクリーンアップすることをお勧めします。
例として、組み込みのstakit.writeFilesメソッドを見てみましょう。
ライターについては以上です。
choo - 堅牢な 4kb フロントエンド フレームワーク
documentify - モジュール式 HTML バンドラー
jalla - 非常に高速な Web コンパイラーとサーバーを 1 つにまとめたもの (たくさんのコード スニペットにも感謝します!)
