generator infinitely static

sangat statis

Ini adalah generator halaman statis dengan dukungan dasar untuk perutean. Ide dibalik alat ini adalah untuk menyederhanakan pengembangan halaman web statis dengan Webpack terbaik dan alat terkait.

Apa yang termasuk?

• Alat linting dengan default yang masuk akal - stylelint dan eslint
• Reload panas sedang dalam pengembangan
• Babel dengan preset env diaktifkan yang juga menangani polyfill
• Minifikasi JavaScript dan penghapusan kode mati
• Kompilasi SASS, awalan, dan minifikasi
• Perpustakaan untuk mengelola breakpoint media (media-blender)
• Setang sebagai bahasa templating (dengan pembantu, tata letak, dan sebagian)
• Dukungan untuk rute (struktur bangunan datar dan bersarang)

Memulai

Menjalankan ini sangat sederhana. Anda memerlukan generator ini dan yo menginstalnya.

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

Catatan : Setelah proyek diinisialisasi, jalankan npm install husky --save-dev .

Perkembangan

Ketika Yeoman selesai, Anda memiliki proyek yang sedang berjalan.

Menjalankan server isi ulang panas

 npm start

Pembangunan produksi

 npm run build

Rute

Menambahkan rute juga sederhana. Di root proyek Anda akan menemukan routes.json , yang berisi rute index awal. Konfigurasi rute juga mendukung data nesting dan template.

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

Setelah itu, di templat Anda, Anda dapat menggunakan pembantu {{linkTo}} yang disertakan seperti ini:

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

Dan untuk data pengguna Anda dapat menggunakan helper getDataAsString :

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

Jika datanya sederhana (array, string, Number, dll.) maka akan ditampilkan seperti biasa, tetapi jika Anda mereferensikan suatu objek, Anda akan mendapatkan JSON yang dirangkai. Tapi ingat, datanya bisa diakses langsung dengan menggunakan objek htmlWebpackPlugin.options di template:

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

Dengan begitu Anda bisa melakukan iterasi melalui array yang ditentukan dalam konteks menggunakan pembantu bawaan.

Lisensi

Lisensi MIT

© 2016 Infinum Inc.