Introducing jQuery in Rails 6 Using Webpacker

jQuery in Rails 6 Using Webpacker

What is Webpacker?

Webpacker is a gem that allows packing assets using modern tools like yarn and writing the latest flavor of JavaScript via Babel.

What is Webpack?

Webpack is a module bundler.

What’s Babel then?

Babel functions same as SASS compiler works for .sass and .scss files. It is a JavaScript transpiler that converts edge JavaScript into plain old ES5 JavaScript that can run in any browser (even the old ones).

For Rails 6 — Webpacker is the Default Javascript Compiler

In the previous version of rails, we have to generate an application with — webpacker option for the integration of webpack. But now webpacker is the default and a good replacement of sprockets.

  • For Action Cable, its generators will create ES6 stubs rather than use CoffeeScript
  • Active Storage, Action Cable, Turbolinks, and Rails-UJS is loaded by a new application.js pack in app/javascript by default and listed as dependencies in the default package.json

Some new Defaults of Rails 6

  1. Javascript has been removed from app/assets directory!
  2. Javascript moved to app/javascript/packs

Now, How we will use Jquery in Rails 6??

In our Rails application run below command to add jQuery.

  • yarn.lock => jquery@^3.3.1:

Leading Ruby on Rails, Python — Django & Mobile App Development Company provides custom web application solutions. Site:

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store