Pengantar WebJars

1. Ikhtisar

Tutorial ini memperkenalkan WebJars dan cara menggunakannya dalam aplikasi Java.

Sederhananya, WebJars adalah dependensi sisi klien yang dikemas ke dalam file arsip JAR. Mereka bekerja dengan sebagian besar kontainer JVM dan kerangka kerja web.

Berikut beberapa WebJars populer: Twitter Bootstrap , jQuery , Angular JS , Chart.js dll; daftar lengkap tersedia di situs web resmi.

2. Mengapa Menggunakan WebJars?

Pertanyaan ini memiliki jawaban yang sangat sederhana - karena mudah.

Menambahkan dan mengelola dependensi sisi klien secara manual sering kali menyebabkan sulitnya mempertahankan basis kode .

Selain itu, sebagian besar developer Java lebih suka menggunakan Maven dan Gradle sebagai fitur manajemen build dan dependensi.

Masalah utama yang dipecahkan WebJars adalah membuat dependensi sisi klien tersedia di Maven Central dan dapat digunakan dalam project Maven standar apa pun.

Berikut ini beberapa keuntungan menarik dari WebJars:

  1. Kami dapat secara eksplisit dan mudah mengelola dependensi sisi klien dalam aplikasi web berbasis JVM
  2. Kita dapat menggunakannya dengan alat build yang biasa digunakan, misalnya: Maven, Gradle, dll
  3. WebJars berperilaku seperti dependensi Maven lainnya - yang berarti kita juga mendapatkan dependensi transitif

3. Ketergantungan Maven

Mari langsung ke dalamnya dan tambahkan Twitter Bootstrap dan jQuery ke pom.xml :

 org.webjars bootstrap 3.3.7-1 org.webjars jquery 3.1.1 

Sekarang Twitter Bootstrap dan jQuery tersedia di classpath proyek; kita dapat dengan mudah mereferensikannya dan menggunakannya dalam aplikasi kita.

Catatan: Anda dapat memeriksa Twitter Bootstrap versi terbaru dan dependensi jQuery di Maven Central.

4. Aplikasi Sederhana

Dengan dua dependensi WebJar ini ditentukan, sekarang mari kita siapkan proyek Spring MVC sederhana untuk dapat menggunakan dependensi sisi klien.

Namun sebelum kita membahasnya , penting untuk dipahami bahwa WebJars tidak ada hubungannya dengan Spring , dan kami hanya menggunakan Spring di sini karena ini adalah cara yang sangat cepat dan sederhana untuk menyiapkan proyek MVC.

Inilah tempat yang baik untuk mulai menyiapkan proyek Spring MVC dan Spring Boot.

Dan, dengan penyetelan projet sederhana, kami akan menentukan beberapa pemetaan untuk dependensi klien baru kami:

@Configuration @EnableWebMvc public class WebConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry .addResourceHandler("/webjars/**") .addResourceLocations("/webjars/"); } }

Kami tentu saja dapat melakukannya melalui XML juga:

5. Ketergantungan Versi-Agnostik

Saat menggunakan Spring Framework versi 4.2 atau lebih tinggi, ini akan secara otomatis mendeteksi pustaka pencari webjars di jalur kelas dan menggunakannya untuk secara otomatis menyelesaikan versi aset WebJars apa pun.

Untuk mengaktifkan fitur ini, kami akan menambahkan pustaka webjars-locator sebagai ketergantungan aplikasi:

 org.webjars webjars-locator 0.30 

Dalam kasus ini, kita bisa mereferensikan aset WebJars tanpa menggunakan versinya; lihat bagian selanjutnya untuk beberapa contoh aktual.

6. WebJars pada Klien

Mari tambahkan halaman selamat datang HTML biasa sederhana ke aplikasi kita (ini adalah index.html ):

 WebJars Demo 

Sekarang kita dapat menggunakan Twitter Bootstrap dan jQuery dalam proyek - mari gunakan keduanya di halaman selamat datang kita, dimulai dengan Bootstrap:

Untuk pendekatan versi-agnostik:

Tambahkan jQuery:

Dan pendekatan versi-agnostik:

7. Pengujian

Sekarang kita telah menambahkan Twitter Bootstrap dan jQuery di halaman HTML kita, mari kita uji mereka.

Kami akan menambahkan peringatan bootstrap ke halaman kami:

Success! It is working as we expected.

Perhatikan bahwa beberapa pemahaman dasar tentang Twitter Bootstrap diasumsikan di sini; inilah panduan memulai secara resmi.

Ini akan menampilkan peringatan seperti yang ditunjukkan di bawah ini, yang berarti kami telah berhasil menambahkan Twitter Bootstrap ke classpath kami.

Mari gunakan jQuery sekarang. Kami akan menambahkan tombol tutup ke peringatan ini:

× 

Sekarang kita perlu menambahkan jQuery dan bootstrap.min.js untuk fungsi tombol tutup, jadi tambahkan mereka di dalam tag body index.html, seperti di bawah ini:

Note: If you are using version-agnostic approach, be sure to remove only the version from the path, otherwise, relative imports may not work:

This is how our final welcome page should look like:

 WebJars Demo

× Success! It is working as we expected.

This is how the application should look like. (And the alert should disappear when clicking the close button.)

8. Conclusion

In this quick article, we focused on the basics of using WebJars in a JVM-based project, which makes development and maintenance a lot easier.

We implemented a Spring Boot backed project and used Twitter Bootstrap and jQuery in our project using WebJars.

The source code of the above-used example can be found in the Github project – this is a Maven project, so it should be easy to import and build.