stakit
v0.0.3
Ein modulares Toolkit zum Erstellen statischer Websites
Stakit ist ein Framework, mit dem Sie leistungsstarke Build-Pipelines für statische Websites erstellen können, ohne ins Schwitzen zu geraten. Es ist minimalistisch und modular, verwendet Streams und das Stakit-Toolkit verfügt über eine Reihe von Plugins und Transformationen, die Sie verwenden können.
Stakit befindet sich noch in einem frühen Entwicklungsstadium, aber Sie können es nutzen, um zu sehen, ob es Sie interessieren sollte oder nicht.
Framework-agnostisch : Funktioniert mit jedem Framework, das eine Zeichenfolge ausgeben kann
modular : Sie haben nie das, was Sie nicht brauchen, aber Sie können es npm install
Kleine API : Es gibt nur 7 Kernmethoden, von denen Sie nur 3 verwenden müssen
Keine Einschränkungen : Sie sind niemals durch die Funktionen und Vorlagen eines Static-Site-Generators eingeschränkt
schnell, speichereffizient : Streams werden stark genutzt
npm i stakit
var stakit = require('stakit')var { render, hydrate } = require('stakit-choo')var app = require('.')var kit = stakit()
.routes(function (state) {return [ '/' ]
})
.render(render(app))
.transform(hydrate)kit.output(stakit.writeFiles('./public'))Im Allgemeinen gehen Sie beim Generieren einer statischen Site zwei Dinge vor:
Füllen Sie Ihre App mit einigen Inhalten
Statische Dateien kopieren
Es gibt viele modulare (und schöne) Tools zum Bündeln von Javascript oder zum Transformieren von CSS. Stakit ist etwas Ähnliches, aber für die gesamte Website und konzentriert sich insbesondere auf HTML-Dateien.
Sie müssen sich um die Bündelung Ihrer App und die Einbindung des Bundles kümmern, wenn Sie dies benötigen. Der Choo-Philosophie folgend ist es klein, verständlich und einfach zu bedienen. Es wurde hauptsächlich für die Zusammenarbeit mit Choo entwickelt, sollte aber auch mit anderen isomorphen Frameworks funktionieren.
Stakit wird programmgesteuert und nicht über die Befehlszeile aufgerufen. Daher benötigen Sie eine Javascript-Datei (z. B. build.js ), wo Sie sie benötigen. Anschließend können Sie das Kit mit stakit() initialisieren und dann einige Methoden verketten.
In der Pipeline müssen zwei Methoden erscheinen:
routes(fn)
render(fn)
Alle anderen Methoden sind optional und werden in der folgenden Reihenfolge aufgerufen:
alle von kit.use() angewendeten Middlewares
die angewendete routesReducer Funktion
für jede Route:
ein einzelner Aufruf an den angewendeten renderer
alle transform
Beenden Sie die Pipeline mit kit.output() .
In diesem Abschnitt finden Sie eine Dokumentation zur Funktionsweise der einzelnen Funktionen in Stakit. Es ist als technische Referenz gedacht.
kit = stakit() Initialisieren Sie eine neue kit Instanz.
kit.html(template, selector)Legt die Start-HTML-Vorlage und den Selektor fest.
kit.use(fn(context)) Schiebt eine Middleware/ein Plugin in die Middleware-Liste. Allgemeine Funktionen wurden vor der Routengenerierung ausgeführt. Sie können den Kontext nach Ihren Wünschen ändern, von der state bis zur Installation transform .
kit.use(function (ctx) {
ctx._transforms.push(transform)})Weitere Informationen finden Sie unter Middlewares.
kit.routes(routeReducer(state)) Der routeReducer ist eine Funktion, die context.state als Parameter erhält und ein Array von Strings/Routen zurückgibt. Dies sind die Routen, auf denen Stakit render aufruft.
kit.routes(function (state) {
return Object.keys(state.content)
// oder statisch
return [ '/', '/about', '/blog' ]})kit.render(renderer(route, state)) Legt den Renderer des Builds fest. Hier geschieht die Magie. Der renderer wird für jede von routes zurückgegebene Route aufgerufen.
Es muss ein Objekt mit den folgenden Werten zurückgeben:
{
html: string, // das Ergebnis des Renderns
state: object // der Zustand nach dem Rendern (optional)}Transformationen erhalten den hier zurückgegebenen aktualisierten Status.
kit.transform(transformFn, opts) Schiebt eine Transformation in die Liste der Transformationen. Stakit verwendet documentify und Streams, um den HTML-Code aufzubauen.
Sie werden aufgerufen, nachdem der gerenderte Inhalt im HTML ersetzt wurde.
Weitere Informationen finden Sie unter Transformationen.
kit.output(writerObject) Startet die Build-Pipeline und beendet sie mit der Übergabe aller Routen an writerObject.write({ destination, stream }) . Gibt ein Promise zurück, das wartet, bis alle Dateien (Routen und statische Dateien) vollständig geschrieben wurden.
Standardmäßig wird ein Writer verwendet, der die Site im Verzeichnis ./public ausgibt.
Weitere Informationen finden Sie unter Autoren.
Integrierte Middleware:
stakit.state(extendState) Dienstprogramm, das Ihnen beim Hinzufügen von Werten zu context.state hilft
kit.use(stakit.state({ message: 'Guten Morgen!' }))stakit.copy(files)Middleware zum Kopieren von Dateien in das Ausgabeverzeichnis.
// Dateien an denselben Speicherort kopierenkit.use(stakit.copy([ 'robots.txt' ]))// Dateien an einen anderen Speicherort innerhalb des Ausgabepfads kopierenkit.use(stakit.copy({
'robots.txt': 'robots.txt',
'sitemap.xml': 'sitemaps/sitemap.xml'})) Documentify ist sehr leistungsstark und kann leicht moduliert werden. Das allgemeine Format einer Stakit-Transformation ist:
// in eine Funktion eingepacktfunction lang (context) {
// die documentify-Transformation zurückgeben
return function (lang) {// einen Transformationsstream zurückgebenreturn hstream({ html: { lang: lang } })
}} Hinweis: hstream ist ein sehr guter Freund!
Die documentify Transformation ist in eine Funktion eingebettet, sodass wir den context abrufen können, wenn wir ihn benötigen, ohne mit der API von documentify herumzuspielen. Wenn Sie dies umgehen möchten, können Sie einfach die documentify Transformation von einer Funktion zurückgeben.
Sehen Sie in transforms/readme.md welche Transformationen mit Stakit geliefert werden.
Autoren geben die generierten, transformierten statischen Dateien aus. Dies kann von der Ausgabe in das Dateisystem bis hin zum Einfügen in ein Dat-Archiv reichen.
Ein Autor muss eine Methode implementieren: write . Für jede Datei, einschließlich der generierten Seiten + der zu context._files hinzugefügten Dateien, wird writer.write mit einem Dateiobjekt aufgerufen. Es sollte ein Promise zurückgeben, das zurückkehrt, nachdem die Pipe geleert wurde (die Datei wurde vollständig geschrieben).
Ein Dateiobjekt sieht folgendermaßen aus:
{
source: null | string,
destination: string,
stream: Stream
}Es wird empfohlen, das Ausgabeverzeichnis vor jedem Build zu bereinigen.
Schauen Sie sich als Beispiel die integrierte stakit.writeFiles -Methode an.
Hier dreht sich alles um Schriftsteller.
choo – robustes 4-KB-Frontend-Framework
documentify – Modularer HTML-Bundler
jalla – Blitzschneller Web-Compiler und Server in einem (vielen Dank auch für die vielen Codeschnipsel!)
