webpack

webpack.md

How to using jQuery plugins in Rails 6 with webpacker

for example we want using slick-carousel in our application.

1. yarn add jquery slick-carousel expose-loader
2. add following lines in app/javascript/packs/application.js

require('slick-carousel')
require('slick-carousel/slick/slick.css')

3. add following lines in config/webpack/environment.js and make it looks like this

const { environment } = require('@rails/webpacker')
environment.loaders.append('expose', {
  test: require.resolve('jquery'),
  use: [
    { loader: 'expose-loader', options: '$' },
    { loader: 'expose-loader', options: 'jQuery' }
  ]
})
module.exports = environment

4. and write jquery functions like old days

document.addEventListener("turbolinks:load", () => {
  $("#slick").slick()
})

5. make sure you have #slick element in your view. ex.

<div id="slick" data-slick='{"slidesToShow": 2, "slidesToScroll": 1}'>
  <img src="https://i.imgur.com/jFpQF6g.png" alt="">
  <img src="https://i.imgur.com/jFpQF6g.png" alt="">
  <img src="https://i.imgur.com/jFpQF6g.png" alt="">
</div>