Kalo kamu baru mengenal Webpack pada Ruby on Rails, dan tidak tahu cara mengelola depedency yang ada didalamnya. Jangan khawatir, kamu berada di tempat yang tepat.
Saat membangun project baru, saya mencoba Rails 6.0.0 beta2 dan menemukan banyak fitur menarik didalamnya. Namun ada sedikit masalah yang saya alami, yaitu cara menginstall package CSS dan Javascript melalui Webpack. Karena sulit akhirnya saya beralih ke Gem sebagai solusinya.
Dalam tutorial ini saya akan memandu kamu melalui proses menginstal bootstrap pada proyek Rails 6.0.0.beta2, tetapi kamu masih dapat menggunakan langkah-langkah yang sama dengan Project Rails dengan versi 5.2 keatas.
1. Setup
Pertama-tama, mari kita mulai dengan membuat project baru :
rails new project_baru_app
Sekarang kita perlu memberi tahu aplikasi kita untuk menginstall asset css dan js kita melalui Webpack. Mari kita mulai dengan membuat manifest css baru di dalam folder app / javascript. Kita akan menggunakan file ini untuk mengimpor semua css kita nantinya.
$ mkdir app/javascript/stylesheets
$ touch app/javascript/stylesheets/application.scss
Catatan: Di aplikasi yang ada, kamu harus mengimport semua css kamu saat ini ke folder yang kita buat di atas, dan mengimportnya melalui file manifes yang baru dibuat.
Ok, selanjutnya kita akan mengimport file yang baru saja kita buat ke manifest js kita
# app/javascript/packs/application.jsimport ‘../stylesheets/application’
Langkah akhirnya yaitu menginput perintah pada Rails untuk menggunakan Webpack dengan membuka file application.html.erb dan membuat beberapa perubahan seperti berikut :
# app/views/layouts/application.html.erb<%= stylesheet_pack_tag ‘application’, media: ‘all’, ‘data-turbolinks-track’: ‘reload’ %>
<%= javascript_pack_tag ‘application’, ‘data-turbolinks-track’: ‘reload’ %>
Disini kita akan mengganti stylesheet_link_tag dan javascript_include_tag helper dengan stylesheet_pack_tag dan javascript_pack_tag. Jika kita menjalankan aplikasi kita sekarang, kita seharusnya dapat melihat asset ini dilayani oleh Webpack.
Webpacker sekarang akan mengawasi setiap perubahan dalam asset kita, dan mengkompilasinya ketika kita merefresh halaman. Ini dapat menyebabkan halaman kita memuat sedikit lebih lambat dalam pengembangan, tapi untungnya ada jalan lain untuk mengatasi masalah tersebut.
2. Menginstall Foreman (Optional)
Kalo kamu tidak suka menunggu lama, tenang saja. Kita bisa menggunakan Gem Foreman dengan webpacker-dev-server supaya ketika kita merefresh halaman kecepatannya tetap optimal.
Untuk menginstall Gem Foreman, kamu bisa mengetikan perintah berikut :
gem install foreman
Selanjutnya, mari kita buat file procfile.dev pada root aplikasi kita, dan masukan script berikut :
# Procfile.devweb: bundle exec puma -C config/puma.rb
webpacker: ./bin/webpack-dev-server
Yang harus kita lakukan sekarang adalah mulai menjalankan Foreman, dan itu akan memuat dua proses yang kita nyatakan di atas dalam satu jendela terminal secara otomatis.
foreman start -f Procfile.dev
Selesai, kini asset kita akan di compile secara otomatis saat kita mengupdatenya, dan loading page kamu akan tetap optimal.
3. Menambahkan Package
Akhirnya kita sampai di proses akhir, Sekarang mari kita install Bootstrap beserta jquery dan popper nya.
yarn add [email protected] jquery popper.js
Kita juga perlu menambahkannya sebagai plugin, jadi mari kita lanjutkan dan tambahkan baris ini kefile config/webpack/environtment.js.
# config/webpack/environment.js…const webpack = require(‘webpack’)
environment.plugins.append(
‘Provide’,
new webpack.ProvidePlugin({
$: ‘jquery’,
jQuery: ‘jquery’,
Popper: [‘popper.js’, ‘default’]
})
)…
Kita memiliki 2 opsi sekarang, pertama kita bisa menambahkan seluruh file framework javascript dan Css dari folder node_module/bootstrap/dist . Atau kedua kita dapat memilih sendiri sumber daya yang akan kita gunakan di aplikasi kita
Saya akan menunjukkan kepada kamu bagaimana melakukan opsi kedua karena memungkinkan kamu untuk memiliki lebih banyak kontrol atas proses instalasi. Buat file baru di folder app / javascript / packs kamu dengan nama bootstrap_custom.js dan script berikut.
# app/javascript/packs/bootstrap_custom.jsimport ‘bootstrap/js/dist/alert’
import ‘bootstrap/js/dist/button’
import ‘bootstrap/js/dist/carousel’
import ‘bootstrap/js/dist/collapse’
import ‘bootstrap/js/dist/dropdown’
import ‘bootstrap/js/dist/index’
import ‘bootstrap/js/dist/modal’
import ‘bootstrap/js/dist/popover’
import ‘bootstrap/js/dist/scrollspy’
import ‘bootstrap/js/dist/tab’
import ‘bootstrap/js/dist/toast’
import ‘bootstrap/js/dist/tooltip’
import ‘bootstrap/js/dist/util’
Dan hubungkan ke file app/javascript/packs/application.js kamu.
# app/javascript/packs/application.js
import ‘./bootstrap_custom.js’
Sekarang kamu bisa mengatur app/javascript/packs/bootstrap_custom.js sesuai yang kamu inginkan.
Mari kita lakukan hal yang sama untuk CSS kita
# app/javascript/stylesheets/application.scss@import ‘./bootstrap_custom.scss’;
Dan buat file dengan nama bootstrap_custom.scss didalam folder app/javascript/stylesheet.
# app/javascript/stylesheets/bootstrap_custom.scss@import ‘~bootstrap/scss/_functions.scss’;
@import ‘~bootstrap/scss/_variables.scss’;
@import ‘~bootstrap/scss/_mixins.scss’;
@import ‘~bootstrap/scss/_root.scss’;
@import ‘~bootstrap/scss/_reboot.scss’;
@import ‘~bootstrap/scss/_type.scss’;
@import ‘~bootstrap/scss/_alert.scss’;
@import ‘~bootstrap/scss/_badge’;
@import ‘~bootstrap/scss/_breadcrumb’;
@import ‘~bootstrap/scss/_button-group’;
@import ‘~bootstrap/scss/_buttons’;
@import ‘~bootstrap/scss/_buttons.scss’;
@import ‘~bootstrap/scss/_card.scss’;
@import ‘~bootstrap/scss/_carousel.scss’;
@import ‘~bootstrap/scss/_close.scss’;
@import ‘~bootstrap/scss/_code.scss’;
@import ‘~bootstrap/scss/_custom-forms.scss’;
@import ‘~bootstrap/scss/_dropdown.scss’;
@import ‘~bootstrap/scss/_forms.scss’;
@import ‘~bootstrap/scss/_grid.scss’;
@import ‘~bootstrap/scss/_images.scss’;
@import ‘~bootstrap/scss/_input-group.scss’;
@import ‘~bootstrap/scss/_jumbotron.scss’;
@import ‘~bootstrap/scss/_list-group.scss’;
@import ‘~bootstrap/scss/_media.scss’;
@import ‘~bootstrap/scss/_modal.scss’;
@import ‘~bootstrap/scss/_nav.scss’;
@import ‘~bootstrap/scss/_navbar.scss’;
@import ‘~bootstrap/scss/_pagination.scss’;
@import ‘~bootstrap/scss/_popover.scss’;
@import ‘~bootstrap/scss/_print.scss’;
@import ‘~bootstrap/scss/_progress.scss’;
@import ‘~bootstrap/scss/_spinners.scss’;
@import ‘~bootstrap/scss/_tables.scss’;
@import ‘~bootstrap/scss/_toasts.scss’;
@import ‘~bootstrap/scss/_tooltip.scss’;
@import ‘~bootstrap/scss/_transitions.scss’;
@import ‘~bootstrap/scss/_utilities.scss’;
Dan kamu dapat melakukan hal yang sama seperti yang kita lakukan sebelumnya, kamu dapat memilih sendiri bagian css mana yang ingin kamu tambahkan ke project kamu.
Selesai, selamat kamu sudah berhasil menginstall Javascript dan CSS pada Ruby On Rails kamu. J
Sumber : medium.com
