How to deploy jQuery in your Rails app using Webpacker

Assumption

When I first introduced jQuery for the first time in programming, I said, "Install jQuery with gem. The js file is read by changing" pack-tag "to" inculude-tag "using the asset pipeline." learned. After that, from rails6, webpacker (gem that introduces webpack) is installed as standard, and I heard that introduction in the asset pipeline is not common, so I wanted to introduce jQuery with webpacker.

environment

ruby 2.6.5 rails 6.0.3.2

Introduction method

Install the app

Create an application and move it to the application you created in the terminal. Also start the local server.

Insert jQuery

Type the following command in the terminal:

terminal


$ yarn add jquery

Setting

Add the code to the contents of the file as shown below.

config/webpack/environment.js


const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
  })
)
module.exports = environment

Load jQuery.

Add the following code.

app/javascript/packs/application.js


require('jquery')

Check if jQuery works

Create a test.js file and load it.

app/javascript/packs/application.js


require('../test')

app/javascript/test.js


$(function(){
  alert('jQuery is installed.')
});

If the jQuery load is successful, "jQuery is installed." Will be displayed in the alert. If it fails, "$" cannot be used and an error is displayed on the console.

Recommended Posts

How to deploy jQuery in your Rails app using Webpacker
How to deploy jQuery on Rails
How to introduce jQuery in Rails 6
How to change app name in rails
[Webpacker] Summary of how to install Bootstrap and jQuery in Rails 6.0
How to use JQuery in js.erb of Rails6
How to deploy Bootstrap on Rails
Deploy your Rails app on Heroku
How to install Swiper in Rails
Deploy Rails apps to Azure App Service using Docker & Continuous Deployment
How to get boolean value with jQuery in rails simple form
[rails6.0.0] How to save images using Active Storage in wizard format
How to use custom helpers in rails
[Rails] How to upload images using Carrierwave
How to insert a video in Rails
How to use MySQL in Rails tutorial
Try deploying Rails app to EC2-Part 2 (Deploy)-
[rails] How to configure routing in resources
How to implement ranking functionality in Rails
How to implement image posting using rails
How to use credentials.yml.enc introduced in Rails 5.2
[Rails] How to handle data using enum
How to deploy
Use Timecop in Rails web app to travel time on your browser
How to create a query using variables in GraphQL [Using Ruby on Rails]
[Rails] How to apply the CSS used in the main app with Administrate
[Ruby on Rails] How to log in with only your name and password using the gem devise
[Rails] How to use select boxes in Ransack
How to translate Rails into Japanese in general
How to prevent direct URL typing in Rails
How to add sound in the app (swift)
How to separate .scss by controller in Rails
[Ruby on Rails] When logging in for the first time ・ How to split the screen in half using jQuery
[Rails] How to upload multiple images using Carrierwave
How to implement a like feature in Rails
How to easily create a pull-down in Rails
[Ruby on Rails] How to install Bootstrap in Rails
How to make a follow function in Rails
[Rails] How to use PostgreSQL in Vagrant environment
Use pagy for pagination in your Rails app.
How to check Rails commands in the terminal
How to implement image posting function using Active Storage in Ruby on Rails
How to write Rails
How to set the display time to Japan time in Rails
How to implement guest login in 5 minutes in rails portfolio
How to implement a like feature in Ajax in Rails
[Ruby on Rails] How to write enum in Japanese
[Ruby On Rails] How to reset DB in Heroku
[How to insert a video in haml with Rails]
How to write a date comparison search in Rails
How to convert A to a and a to A using AND and OR in Java
How to query Array in jsonb with Rails + postgres
[Rails 6] How to set a background image in Rails [CSS]
[Rails] Create sitemap using sitemap_generator and deploy to GAE
Rails learning How to implement search function using ActiveModel
[Rails] How to load JavaScript in a specific view
How to get started with creating a Rails app
[Rails] How to display an image in the view
[Rails] How to install a decorator using gem draper
How to implement a circular profile image in Rails using CarrierWave and R Magick
[Rails] How to display the weather forecast of the registered address in Japanese using OpenWeatherMap