lulu

【Rails】Railsプロジェクト全体でjQueryを使用できるようにする

やること

Railsのwebpackerの機能を使って、Railsプロジェクト全体でjQueryを利用できるようにします。

ver

  • ruby 2.5.1
  • Rails 6.0.3

webpackerにjqueryを登録する

# 名前は任意で
$ touch config/webpack/plugins/jquery.js

↑で作成した jquery.js を編集する

const webpack = require('webpack')
module.exports = new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
})

config/webpack/environment.js に↑で作成したjsを登録する

const { environment } = require('@rails/webpacker')
const jquery = require('./plugins/jquery')

environment.plugins.prepend('jquery', jquery)
module.exports = environment

実験

application.js に、jqueryを使った記述を書く

$("body, html").on("click", () => {
  alert();
})

この状態で、localhost:3000にアクセスし、画面をクリックしたらalertが表示されることを確認する。