generator infinitely static

無限靜態

這是一個靜態頁面產生器，具有基本的路由支援。該工具背後的想法是利用最好的 Webpack 和相關工具來簡化靜態網頁的開發。

包括什麼？

• 具有合理預設值的 Linting 工具 - stylelint 和 eslint
• 開發中的熱重載
• 啟動了 env 預設的 Babel 也可以處理 polyfills
• JavaScript 縮小和死程式碼刪除
• SASS 編譯、前綴和縮小
• 用於管理媒體斷點的庫（media-blender）
• Handlebars 作為模板語言（帶有幫助器、佈局和部分）
• 支援路線（平面和嵌套建構結構）

入門

運行這個非常簡單。您需要安裝這個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

路線

新增路線也很簡單。在專案的根目錄中，您將找到routes.json ，其中包含初始index路由。路由配置也支援嵌套和模板資料。

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

這樣您就可以使用內建幫助程式迭代上下文中指定的陣列。

執照

麻省理工學院許可證

© 2016 潤飛聯公司