Rails 6でjQueryとBootstrapを使えるようにする(Rails 6)

Ruby on Railsでアプリケーションを作る際に,jQueryとBootstrapを使えるようにしたかったので手順をメモ。(Webpackerを使用。)

1.yarnでjQuery、Bootstrap、popper.js(Bootstrapが使う)を導入。

アプリケーションのディレクトリ配下で以下を実行。

yarn add jquery bootstrap popper.js

2.webpackの設定
app/config/webpackのenvironment.jsの記述を追加する。
(これによりimportやrequireなしで$やBootstrapのJavascriptが使えるようにする。)

environment.js

const { environment } = require('@rails/webpacker');

//ここから
const webpack = require('webpack');

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: 'popper.js'
  })
);
//ここまで追加。

module.exports = environment

3.BootstrapのJS,CSSをインポートする
app/javascript/packsのapplication.jsでBootstrapのJSをimport。
app/javascript/stylesheetsにapplication.scssを作成し、BootstrapのCSSをimport。

application.js

import 'bootstrap';
import '../stylesheets/application';

※Webpackerはビルドの際にapp/javascript/packsの中身だけを参照するため、
application.scssがビルドされるようにapplication.jsでインポートしておく。

application.scss

@import '~bootstrap/scss/bootstrap';

4.アプリケーション側からWebpackerがビルドしたJS,CSSを読み込ませる
app/views/layouts/application.html.erbのhead内に以下2文を追記。

application.html.erb

<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

これで完了。