배경

rails에 이미지 슬라이드 쇼의 slick 등의 플러그인을 도입할 때,
jQery의 도입이 필수가 되어, 단지 도입하는 것만 꽤 시간이 걸려 버렸기 때문에,
잊지 않게 하는 자신을 위해서와 같은 레벨의 쪽이 고생하지 않아도 좋게 작성합니다!

하고 싶은 일

· 슬릭 등의 이미지 슬라이드 쇼 도구를 루비로 사용하고 싶습니다.
· 이를 위해 jQuery를 도입하고 싶습니다.

운영 환경

rails (6.0.3.7)

절차

①jQuery 설치
②Webpack 설정
③application.js 설정
④ 동작 확인

①jQuery 설치

Rails5 이전의 도입 방법에서는 jquery-rails라는 Gem을 설치하는 것이 기본인 것 같습니다만,
Webpacker로 관리할 때는 yarn 명령을 사용하여 설치합니다.
＊나는 이 시점에서 실수하고 있었다＊

rails6 이상
yarn add jquery


②Webpack 설정

config/webpack/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 설정

javascript/packs/application.js에 require ( 'jquery')를 작성하십시오.

javascript/packs/application.js

//中略

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
// 追記
require('jquery')

//中略

④ 동작 확인

뭐든지 좋기 때문에 jQury의 기술을 해 검증 툴로 확인해 본다.
Javascrypt 디렉션에 test.js라는 파일을 만들고 아래 코드를 작성했습니다.
예

test.js

$(function() {
  console.log("OK");
});

아래와 같이 검증 툴로 문제 없게 표시되면 도입 성공! !

주의

마지막 도입 테스트 단계에서 test.js를 작성하고 작성할 때,
javascript/packs/application.js 에 require('../test') 를 기술해 작성한 파일을 읽어들일 필요가 있습니다! !

javascript/packs/application.js

//中略

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')
// 追記
require('../test')

//中略

되돌아가다

과거의 기사를 참고해, gem'jquery-rails'로 bundle 성공했기 때문에 도입할 수 없는 것을 전혀 의심하지 않았습니다 w
slick이나 swiper등 여러가지 슬라이드 쇼의 플러그인을 시도했지만 처마 같은 에러가 나왔기 때문에 엄청나게 살았습니다.
그 당시 콘솔에서 동작 테스트를 할 때 jQuery 설명이로드되지 않는다는 것을 알았습니다. . .
혹시 도입 방법이 다른가? 라고 조사했을 때에 Rails6에서 jQuery를 도입하는 방법 라고 하는 기사를 만나, 무사 도입하기에 이르렀습니다.

조금 더 빨리 테스트 코드로 시도하는 것이 좋았지 만,
bundle의 아래 표기를 믿고 의심하지 않았습니다.

Bundle complete! 26 Gemfile dependencies, 101 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

slick등의 사용 방법은 또 다른 기사로 씁니다ー!