AUTOVICE

TECH BLOG

Rails6から標準導入されたWebpackerでjQueryとBootstrapを管理する方法

2020-02-10

はじめに

Rails6からWebpackerが標準導入されるようになりました。
今までjQueryやBootstrapを導入するには、それぞれのGemをインストールしてapp/assets/javascripts/application.jsapp/assets/stylesheets/application.scssで組み込むということをしていましたが、せっかくなので標準導入されたWebpackerでjQueryとBootstrapを管理するようにしましょう。

前提

  • Rails 6.0.0
  • Webpacker 4.2.0
  • macOS Catalina

Rails6からWebpackerが標準導入されるようになったので、Webpackerはすでにインストールされているものとします。

Railsアプリ作成

まずは以下のコマンドで新しくRailsアプリを作成します。

$ cd ~/Product/
$ rails _6.0.0_ new test_app
...
✨  Done in 164.40s.
Webpacker successfully installed 🎉 🍰

適当にコントローラーとビューを作ります。

$ cd test_app
$ rails g controller Statics index

テストサーバーを起動。

$ rails s

ブラウザでhttp://localhost:3000/statics/indexにアクセスします。


初期表示はこんな感じですね。

諸々のインストール

まずはWebpackerが管理するためのjQueryやBootstrapをインストールします。
Railsアプリのルートディレクトリで以下のコマンドを実行します。

$ cd ~/Product/test_app/
$ yarn add bootstrap jquery popper.js
...
✨  Done in 20.61s.

正常にインストールできたかはpackage.jsonで確認できます。

{
  "name": "test_app",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "^4.2.0",
    "bootstrap": "^4.4.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.9.0"
  }
}

jQueryの管理方法

app/javascript/packs/application.jsに以下を追記します。

require("jquery")

次に、config/webpack/environment.jsに以下を追記します。

const webpack = require('webpack')

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

Bootstrapの管理方法

app/javascript/配下にsrcというディレクトリを作成し、その中にapplication.scssというファイルを作成します。
作成したapplication.scssに以下を記述します。

@import '~bootstrap/scss/bootstrap';

次に、app/javascript/packs/application.jsに以下を追記します。

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

確認

それではjQueryとBootstrapが動くか確認してみましょう。
確認のため、app/views/statics/index.html.erbを以下のように変更してみました。
ページ読み込み時にjQueryでBootstrapのスタイルを適用させています。

<h1>Statics#index</h1>
<p>Find me in app/views/statics/index.html.erb</p>

<!-- 以下を追記 -->
<script>
  $(window).on('load', function() {
    $('body').addClass('bg-dark');
    $('body').addClass('text-light');
  });
</script>

テストサーバーの再起動を忘れずに。

...
- Goodbye!
Exiting

$ rails s

では、もう一度http://localhost:3000/statics/indexにアクセスしてみます。


バッチリですね!

ちなみに、Webpacker管理下のファイルが更新されたときはWebpackerのコンパイルが走ります。
テストサーバーを起動したターミナルを見てみると、以下のようなログが出力されています。

...
[Webpacker] Compiling...
[Webpacker] Compiled all packs in /Users/user/Products/test_app/public/packs
[Webpacker] Hash: 53154d7baad00c6a1252
Version: webpack 4.41.2
Time: 3718ms

Webpackerのコンパイルって割と時間かかるんですよね…

まとめ

WebpackerでjQueryとBootstrapを管理する方法を書いてきましたが、実はWebpacker(Webpack)が何者なのかイマイチわかってません😅
Rails6から標準導入されたということは、Raiilsの開発チームは何かしらのメリットをWebpackに見出したんだと思いますが…
Webpackについて調べたらまた記事にしたいと思います。

設定ファイルまとめ

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'

app/javascript/src/application.scss

@import '~bootstrap/scss/bootstrap';

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