generator infinitely static

無限に静的な

これは、ルーティングの基本サポートを備えた静的ページ ジェネレーターです。このツールの背後にある考え方は、Webpack と関連ツールを最大限に活用して静的 Web ページの開発を合理化することです。

何が含まれていますか?

• まともなデフォルトのリンティングツール - stylelint と eslint
• ホットリロードは開発中です
• ポリフィルも処理する env プリセットが有効化された Babel
• JavaScript の縮小とデッドコードの削除
• SASS のコンパイル、プレフィックス付け、縮小化
• メディア ブレークポイントを管理するためのライブラリ (media-blender)
• テンプレート言語としてのハンドルバー (ヘルパー、レイアウト、およびパーシャルを使用)
• ルートのサポート (フラットおよびネストされたビルド構造)

はじめる

これを実行するのは非常に簡単です。このジェネレーターをインストールするyoがあります。

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

注: プロジェクトが初期化された後、 npm install husky --save-devを実行します。

発達

Yeoman が完了すると、作業中のプロジェクトが完成します。

ホットリロードサーバーを実行中

 npm start

実稼働ビルド

 npm run build

ルート

ルートの追加も簡単です。プロジェクトのルートに、最初のindexルートを含むroutes.jsonあります。ルート構成は、ネストとテンプレート データもサポートします。

 {
  "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
    }
  }
}

その後、テンプレートで次のように、含まれている{{linkTo}}ヘルパーを使用できます。

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

また、ユーザー データにはgetDataAsStringヘルパーを使用できます。

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

データが単純な場合 (配列、文字列、数値など) は通常どおり表示されますが、オブジェクトを参照すると文字列化された JSON が取得されます。ただし、テンプレート内のhtmlWebpackPlugin.optionsオブジェクトを使用すると、データに直接アクセスできることに注意してください。

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

そうすることで、組み込みヘルパーを使用してコンテキストで指定された配列を反復処理できます。

ライセンス

MITライセンス

© 2016 インフィナム株式会社