generator infinitely static

unendlich statisch

Dies ist ein statischer Seitengenerator mit grundlegender Unterstützung für Routing. Die Idee hinter diesem Tool besteht darin, die Entwicklung statischer Webseiten mit dem Besten von Webpack und verwandten Tools zu optimieren.

Was ist enthalten?

• Linting-Tools mit vernünftigen Standardeinstellungen – stylelint und eslint
• Heißes Nachladen in Entwicklung
• Babel mit aktivierter Umgebungsvoreinstellung, die sich auch um Polyfüllungen kümmert
• JavaScript-Minimierung und Entfernung von totem Code
• SASS-Kompilierung, Präfixierung und Minimierung
• Eine Bibliothek zum Verwalten von Medienhaltepunkten (Media-Blender)
• Lenker als Vorlagensprache (mit Helfern, Layouts und Teiltexten)
• Unterstützung für Routen (flache und verschachtelte Build-Struktur)

Erste Schritte

Das Ausführen ist wirklich einfach. Sie benötigen diesen Generator und yo müssen installiert sein.

npm install -g yo generator-infinitely-static
mkdir my-project
cd my-project
git init
yo infinitely-static

Hinweis : Nachdem das Projekt initialisiert wurde, führen Sie npm install husky --save-dev aus.

Entwicklung

Wenn Yeoman fertig ist, haben Sie ein funktionierendes Projekt.

Laufender Hot-Reload-Server

 npm start

Produktionsaufbau

 npm run build

Routen

Auch das Hinzufügen von Routen ist einfach. Im Stammverzeichnis des Projekts finden Sie routes.json mit der anfänglichen index . Die Routenkonfiguration unterstützt auch Verschachtelungs- und Vorlagendaten.

 {
  "index" : { // points to the template file in app/templates/pages/index.hbs
    "route" : "/" , // don't forget the trailing slash
    "context" : { // data that you can use in the page
      "user" : {
        "name" : "Super user"
      }
    }
  } ,
  "contact" : {
    "route" : "contact/me/" // will generate nested routes
    }
  }
}

Anschließend können Sie in Ihren Vorlagen den enthaltenen {{linkTo}} Helfer wie folgt verwenden:

 < a href =" {{linkTo 'index'}} " > Home </ a >

Und für die Benutzerdaten können Sie den Helfer getDataAsString verwenden:

 < h1 > {{getDataAsString 'user.name'}} </ h1 >

Wenn es sich bei den Daten um einfache Daten handelt (Array, String, Zahl usw.), werden sie wie gewohnt angezeigt. Wenn Sie jedoch auf ein Objekt verweisen, erhalten Sie ein stringifiziertes JSON. Denken Sie jedoch daran, dass auf die Daten direkt zugegriffen werden kann, indem Sie das Objekt htmlWebpackPlugin.options in der Vorlage verwenden:

 < h1 > {{htmlWebpackPlugin.options.context.user.name}} </ h1 >

Auf diese Weise können Sie mithilfe der integrierten Hilfsprogramme ein im Kontext angegebenes Array durchlaufen.

Lizenz

Die MIT-Lizenz

© 2016 Infinum Inc.