Rails 6 webpacker で JavaScript を扱う

最初に、yarn でライブラリをインストールする。

たとえば jquery を入れたい場合。

yarn add jquery

config/webpack/environment.js の設定で、jquery の$マークを使えるようにする。

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 する。

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

app/javascript/packs/application.js がJSのエントリーポイントとなり、ビルド後は public/packs/js にファイルが設置される。

app/views/layouts/application.html.erb でエントリーファイルを読み込む記述をしている。

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

たとえば、app/javascript/packs/test.js というファイルを作ってみる。

touch app/javascript/packs/test.js

h1 タグを赤色にしてみる。

$(function() {
  $("h1").css("color", "red");
});

そして、以下の記述を view ファイルに書く。

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

すると、h1 タグの文字が赤色になるはず。