Rails6과 docker-compose를 사용하는 환경에 jQuery를 도입하는 방법
7327 단어 docker-composeRailsjQuery
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.jsconst { 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
Reference
이 문제에 관하여(Rails6과 docker-compose를 사용하는 환경에 jQuery를 도입하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/siromofu3/items/9c17d98b7554fa2c279f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ docker-compose exec web yarn add jquery
$ docker-compose up
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
Reference
이 문제에 관하여(Rails6과 docker-compose를 사용하는 환경에 jQuery를 도입하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/siromofu3/items/9c17d98b7554fa2c279f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
//中略
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
// 追記
require('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
Reference
이 문제에 관하여(Rails6과 docker-compose를 사용하는 환경에 jQuery를 도입하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/siromofu3/items/9c17d98b7554fa2c279f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Rails6과 docker-compose를 사용하는 환경에 jQuery를 도입하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/siromofu3/items/9c17d98b7554fa2c279f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)