[Rails6] jQueryを使えるようにする

環境

Rails 6

インストールする

$ yarn add jquery

webpackの編集をする

config/webpack/environment.js

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

// ここから追記する
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)
// ここまで追記する

module.exports = environment

application.jsの編集をする

app/javascript/packs/application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "jquery"   //この１行を追加

queryファイルを作成し、読み込む

jsファイルは、javascriptフォルダに作成します。
今回は test.js を作成しました。
作成したjsファイルを読み込むために application.js に以下のような import "ファイル名.js" を追記します。

app/javascript/packs/application.js

import "jquery"
import "test.js"   //この１行を追加

そして test.js コードを書いていきましょう。

？　リロードしないとJavaScriptが動かない場合

jsファイルに以下のように turbolinks:load を記述します。

document.addEventListener("turbolinks:load", function() {
  //処理
})

参考にしたサイト