webpacker에서 Jquery 소개

오랜만의 투고가 됩니다.
Rails6.0부터 표준이 된 webpacker를 사용하여 Jquery를 도입하는 방법에 대한 기사를 작성하고 싶습니다. webpacker를 사용한 Jquery의 도입 방법에 관해서는 그 밖에 기사가 있었습니다만, 자신과 같은 초보자에게는 조금 설명 부족해, 조금 빠져 버렸기 때문에, 이번은 거기를 보충해 기사를 써 갔다 생각합니다.
우선, 「webpacker란」이라고 하는 곳과 「왜 webpacker를 사용하는가」를 간단하게 하면서 정리해 줍니다.

환경

루비 2.7.1p83
rails 6.0.3.4

webpacker란?

Webpack을 Ruby on Rails에서 사용하기위한 Gem 패키지

webpack이란?

자바스크립트, CSS, 이미지 등의 정적 파일을 하나로 함께 관리하는 모듈 번들 중 하나입니다. 최근의 모던한 JavaScript 프레임워크의 모듈 번들로서는 디폴트 표준이 되고 있다.

모듈 번들이란?

여러 모듈의 종속성을 해결하고 하나로 묶는 (번들링) 도구

모듈이란?

하나의 JavaScript 파일에 긴 처리를 쓰면 가독성이 나빠지기 때문에, 일반적으로 페이지마다 복수의 파일로 분할을 행한다. 이 분할된 JavaScript 파일이나 Sass 파일을 「모듈」이라고 부른다

왜 모듈 번들러가 필요한가?

가독성이 높고 유지 보수가 쉬워집니다.
→ 기능이나 페이지별로 JavaScript 파일이 나뉘어 코드를 읽을 수 있습니다

JavaScript 파일 등이 하나로 결합되어 종속성이 해결되어 읽기가 빨라집니다.
→ 브라우저와 서버간은 HTTP1.1의 프로토콜로 통신하고 있어 한 번에 처리할 수 있는 요청의 수는 한정되어 있다. 요청 수가 늘어나면 성능에 영향을 미치므로 하나의 모듈로 함께 전송하는 것이 더 빠릅니다

ES6 비대응의 낡은 브라우저에서도 해석할 수 있는 형태(ES5)에 자동으로 변환해 준다
→ JavaScript가 모듈화한 것이 ES6(2015년)부터이기 때문에, 그 이전의 브라우저에서는 읽을 수 없다. 이것을 webpack은 ES5로 변환해 준다.

그럼, 실제로 도입 방법을 써 갑니다.

도입 방법

먼저 terminal에서 yarn을 사용하여 jquery를 설치합니다.

terminal

$ yarn add jquery

이하 파일에 설정 등을 추기해 갑니다.

config/webpack/enviroment.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

app/javascript/packs/application.js

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

이번에는 "toppage.js"라는 파일을 만들고 읽었습니다.

app/javascript/packs/application.js

require("jquery")
require("toppage.js")

app/javascript/toppage.js

console.log("hogehoge")

브라우저에서 확인하면 출력할 수 있습니다.


여기까지 읽어 주셔서 감사합니다.
비슷한 초보자의 도움이 되시면 감사하겠습니다.

참고

htps : // 코 m / 마사히사 / ms / 에아 cb0c3b82f4 아 11fc13
htps //w w. 흐리게 ch의 ㄉ기에 s. 코 m / b ぉ g / 인 t 로즈 신 g j 쿠 리 ry - n-rai ls - 6 - usin g - u b pac 케 r
htps // // cs. 메아아/엔트리/12140/