Rails6에 Webpack에서 jQuery와 Bootstrap을 도입하는 방법

소개

Rails6부터 Webpack이 표준으로 도입되었습니다.
이에 따라 Bootstrap과 jQuery의 도입 방법이 바뀌었으므로 절차를 정리했습니다.

설치

다음 명령으로 설치합니다.
성공적으로 설치되었는지 package.json에서 확인할 수 있습니다.

터미널

$ yarn add bootstrap jquery popper.js

Bootstrap 및 jQuery 도입

다음을 추가합니다.require("jquery")import 'bootstrap'import '../src/application.scss'
app/javascript/packs/application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

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


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

import 'bootstrap'                        //追加
import '../src/application.scss'          //追加

여기에서 -- 여기까지를 아래에 추가합니다.

config/webpack/evironment.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 아래에 src를 만들고 그 안에 application.scss를 만듭니다.

app/javascript/src/application.scss

@import '~bootstrap/scss/bootstrap';     //追加

동작 확인

올바르게 도입되었는지 확인하기 위해 다음 파일을 만들었습니다.

demo.html.erb

<div class="container">
  <h1>Bootstrap</h1>
  <a class="btn btn-primary" href="#" role="button">Link</a>
  <button class="btn btn-primary" type="submit">Button</button>
  <input class="btn btn-primary" type="button" value="Input">
  <input class="btn btn-primary" type="submit" value="Submit">
  <input class="btn btn-primary" type="reset" value="Reset">

  <h1>jQuery</h1>
  <p id="hoge">赤色になるよ</p>
  <script>
    $("#hoge").css("color","red")
  </script>
</div>

<도입 전>






<도입 후>
올바르게 도입되면 버튼이 파란색으로 바뀌고 (Bootstrap) 문자가 빨간색으로 바뀝니다. (jQuery)

결론

이상으로 도입은 완료입니다!!