jQuery 배포 절차 (Rails6/Webpacker)
소개
학습이나 포트폴리오 제작에서 jQuery를 여러 번 사용했습니다.
Rails6 계 이후는 조금 마음이 바뀌어 도입마다 검색에 시간이 걸렸습니다.
비망록으로서 주로 도입 순서를 정리해 보았습니다.
※ 어디까지나 도입 순서를 정리한 비망록이므로, 각 기능이나 기술 내용, 커맨드등의 상세 설명은 할애 하고 있습니다.
개발 환경
Ruby 2.6.5
Rails 6.0.3.4
Visual Studio Code
(Google Chrome)
고찰·검증
웹 애플리케이션에서 사용하는 JavaScript 관리는 Rails5 계열까지는 자산 파이프라인을 사용했지만 Rails6 계열에서는 기본적으로 도입된 Webpacker .
webpack/webpacker란?
webpack
웹 애플리케이션 제작에 필요한 각 JavaScript를 종속성을 고려하면서 일괄적으로 관리하는 툴, 모듈 번들러의 일종입니다.
【공식】Webpack 문서
Webpacker
webpack을 Rails 사양으로 한 gem입니다.
도입 설정을 간이화해, 파일이나 헬퍼 메소드를 준비해 줍니다.
Rails6 계에서 기본적으로 도입되어 있습니다.
【공식】Webpacker/GitHub
도입 절차
※전제로서, yarn가 인스톨 되고 있는 것으로 합니다.
①yarn에서 jQuery 도입
터미널% yarn add jquery
②webpack의 설정 파일 편집
config/webpack/environment.jsconst { environment } = require('@rails/webpacker')
// 追記 ここから
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery',
})
)
// 追記 ここまで
module.exports = environment
③jQuery를 호출할 수 있도록 설명 추가
app/javascript/packs/application.js// 省略
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery') // ←追記
// 省略
지금까지 jQuery의 도입과 로딩이 완료되었습니다.
덧붙여서, JavaScript의 참조 자체는, application.html.erb 에 디폴트로 기술되고 있는, 아래의 헬퍼 메소드의 코드로 행해지고 있습니다.
app/views/layouts/application.html.erb<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
(省略）
<%# ↓の記述でwebpackで管理されているJavaScriptを参照 %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
~ 막상, 거동 확인 ~
도입이 완료되었으므로 jQuery가 제대로로드되는지
만약을 위해 마지막으로 확인합니다.
④app/javascript 디렉토리 아래에 테스트 파일을 작성
app/javascript/sample.js$(function() {
console.log("hoge");
});
⑤ 테스트 파일 참조 설정
app/javascript/packs/application.js// 省略
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')
require('../sample') // ←追記
// 省略
⑥ 서버 재시작, 브라우저 콘솔 확인
터미널% rails s
↓ localhost:3000로 이동하여 검증 도구 시작
콘솔에 지정한 문자가 나오면 확실합니다! !
끝에 / 감상
아직도 뿌리 깊은 인기의 jQuery도 사용하면서, 서투른 JavaScript의 학습에 임해 가고 싶습니다…m(_ _)m
초학자로 졸려 기사입니다만, 조금이라도 도움이 되면 기쁘게 생각합니다.
끝까지 읽어 주셔서 감사합니다.
참고 기사
【공식】Webpack 문서
【공식】Webpacker/GitHub
Webpacker를 사용하여 jQuery를 설치하는 단계를 간략하게 요약했습니다.
Introducing jQuery in Rails 6 Using Webpacker
Reference
이 문제에 관하여(jQuery 배포 절차 (Rails6/Webpacker)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/pli8xxx_yu/items/df34a6ea2597694a09cd
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
웹 애플리케이션에서 사용하는 JavaScript 관리는 Rails5 계열까지는 자산 파이프라인을 사용했지만 Rails6 계열에서는 기본적으로 도입된
Webpacker .webpack/webpacker란?
webpack
웹 애플리케이션 제작에 필요한 각 JavaScript를 종속성을 고려하면서 일괄적으로 관리하는 툴, 모듈 번들러의 일종입니다.
【공식】Webpack 문서
Webpacker
webpack을 Rails 사양으로 한 gem입니다.
도입 설정을 간이화해, 파일이나 헬퍼 메소드를 준비해 줍니다.
Rails6 계에서 기본적으로 도입되어 있습니다.
【공식】Webpacker/GitHub
도입 절차
※전제로서, yarn가 인스톨 되고 있는 것으로 합니다.
①yarn에서 jQuery 도입
터미널
% 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',
jQuery: 'jquery',
jquery: 'jquery',
})
)
// 追記 ここまで
module.exports = environment
③jQuery를 호출할 수 있도록 설명 추가
app/javascript/packs/application.js
// 省略
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery') // ←追記
// 省略
지금까지 jQuery의 도입과 로딩이 완료되었습니다.
덧붙여서, JavaScript의 참조 자체는,
application.html.erb 에 디폴트로 기술되고 있는, 아래의 헬퍼 메소드의 코드로 행해지고 있습니다.app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
(省略）
<%# ↓の記述でwebpackで管理されているJavaScriptを参照 %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
~ 막상, 거동 확인 ~
도입이 완료되었으므로 jQuery가 제대로로드되는지
만약을 위해 마지막으로 확인합니다.
④app/javascript 디렉토리 아래에 테스트 파일을 작성
app/javascript/sample.js
$(function() {
console.log("hoge");
});
⑤ 테스트 파일 참조 설정
app/javascript/packs/application.js
// 省略
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')
require('../sample') // ←追記
// 省略
⑥ 서버 재시작, 브라우저 콘솔 확인
터미널
% rails s
↓
localhost:3000로 이동하여 검증 도구 시작콘솔에 지정한 문자가 나오면 확실합니다! !
끝에 / 감상
아직도 뿌리 깊은 인기의 jQuery도 사용하면서, 서투른 JavaScript의 학습에 임해 가고 싶습니다…m(_ _)m
초학자로 졸려 기사입니다만, 조금이라도 도움이 되면 기쁘게 생각합니다.
끝까지 읽어 주셔서 감사합니다.
참고 기사
【공식】Webpack 문서
【공식】Webpacker/GitHub
Webpacker를 사용하여 jQuery를 설치하는 단계를 간략하게 요약했습니다.
Introducing jQuery in Rails 6 Using Webpacker
Reference
이 문제에 관하여(jQuery 배포 절차 (Rails6/Webpacker)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/pli8xxx_yu/items/df34a6ea2597694a09cd
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(jQuery 배포 절차 (Rails6/Webpacker)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/pli8xxx_yu/items/df34a6ea2597694a09cd텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
