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)

おわりに

以上で導入は完了です!!