Rails6과 docker-compose를 사용하는 환경에 jQuery를 도입하는 방법

docker-compose 위에 구축한 Rails6의 환경에, jQuery를 도입하려고 여러가지 조사했으므로 메모를 남깁니다.
Rails5 이전의 방법을 흉내내고 Gem을 도입해도 움직이지 않고, 잠시 빠졌습니다.
Rails6에서는 webpacker를 사용해 이하의 순서로 간단하게 도입할 수 있는 것 같습니다.

우선 jQuery를 설치



webpacker로 관리하려면 yarn 명령을 사용하여 설치합니다.
docker-compose에 설치하려면 docker-compose exec web 명령을 사용하십시오.

터미널
$ docker-compose exec web yarn add jquery

안전하게 설치할 수 있다면 docer-compose를 시작하십시오.

터미널
$ docker-compose up

그런 다음 webpack 설정 추가



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에 설정 추가



application.js 파일을 편집하여 jQuery를 호출할 수 있도록 설정합니다.

javascript/packs/application.js
//中略

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

//中略

이것으로 jQuery의 도입이 완료됩니다.

jQuery의 동작 확인



jQuery가 제대로 작동하는지 확인합니다.
몇 가지 뷰에 테스트용 p 태그를 기입합시다.

좋아하는 view 파일.html.erb

<p>テスト</p>

당연하지만 브라우저에는 다음과 같이 표시됩니다.

그런 다음 다른 파일에 jQuery 동작을 입력합니다.
Rails6에서는 app/javascript 아래에 js 파일을 넣는 것 같기 때문에, 여기서는 바로 아래에 임시로 test.js 파일을 작성합니다.

app/javascript/test.js
$(document).ready(function() {
  $("p").text("jQuery稼働テスト成功!");
});

작성한 test.js를 view로 읽으려면 application.js에 js 파일을 읽는 코드를 추가해야합니다.

javascript/packs/application.js
//中略

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

//中略

jQuery가 성공적으로 로드되면 다음과 같이 p 태그의 문자가 jQuery로 대체됩니다.
이와 같이 표시되면 jQuery의 동작 확인은 성공입니다.

이제 무사히 docker-compose와 Rails6 환경에 jQuery를 도입 할 수있었습니다.

결론



Rails에 대한 jQuery 도입 기사는 많이 있지만 Rails5 이전의 방법을 참조하고 있었기 때문에 잘 가지 않고 잠시 고민했습니다.
초보자가 있을지도 모릅니다만, Rails의 버전이 다르면 도입 방법이 완전히 다르다는 것을 통감하면서, 어떻게든 jQuery를 도입할 수 있었습니다.
마찬가지로 초보자로 고민하고 있는 사람의 참고가 되면 다행입니다.

참고로 한 기사는 이쪽
htps : // 코 m / 타츠 히코 나카야마 / ms / b2f0c77 794 또는 8c9bd74
htps : // 이 m/좋은 야마_진짜/있어 ms/940b130fd20540fd70f1

좋은 웹페이지 즐겨찾기