#環境
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" //この1行を追加
#queryファイルを作成し、読み込む
jsファイルは、javascriptフォルダに作成します。
今回は test.js
を作成しました。
作成したjsファイルを読み込むために application.js
に以下のような import "ファイル名.js"
を追記します。
app/javascript/packs/application.js
import "jquery"
import "test.js" //この1行を追加
そして test.js
コードを書いていきましょう。
##? リロードしないとJavaScriptが動かない場合
jsファイルに以下のように turbolinks:load
を記述します。
document.addEventListener("turbolinks:load", function() {
//処理
})