소개

이 기사에서는 Rails에서 jquery를 사용하기위한 설정을 설명합니다.
이 기사의 끝에서는 실제로 jquery를 사용할 수 있는지 여부를 확인하는 방법에 대해서도 설명합니다.

jQuery 소개

우선 단말기에서 다음 명령을 친다.

터미널

yarn add jquery

그런 다음 environment.js 를 편집합니다.

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

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()
//　↓追加
require('jquery')

지금까지 jquery 설치가 완료되었습니다.
마지막으로 제대로 설정되었는지 확인합니다.

jQuery 버전 확인

우선 앱을 시작

터미널

$ rails s

※여기서 주의입니다만 이미 앱을 시작하고 있는 사람은 한번 접속을 끊고 다시 시작해 주세요

그런 다음 개발자 도구를 열고 콘솔에서 console.log($.fn.jquery)


그렇다면 오른쪽 하단에 jquery의 버전이 나오면 좋으므로 이것이 나오면 제대로 설정할 수 있습니다.
수고하셨습니다.