このviewsだけにこのJSを読み込みたい・・・!
という時があると思います。
今回はそんな時のためにJSファイルを個別に読み込む方法を紹介します。
(esbuildを使用している前提で進めていきます)
手順
1. package.json に記載されているビルドスクリプトのビルド対象に app/javascript/*.*
が入っていることを確認する。
入っていない場合は以下を参考に書き換えてみてください。
"build:js": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds"
2. JSファイルを作る
app/javascripts/mofmof.js
console.log("mofmof")
3. 読み込みたいviewsファイルに以下を追記する
<%= javascript_include_tag "mofmof", "data-turbo-track": "reload", type: "module" %>
app/javascripts/
直下にJSファイルを置く場合は意外とこれだけで終わります。
JSファイルの階層を深くしたい場合
app/javascripts/mofmof/index.js のように app/javascripts/
直下にJSファイルを置かない場合は少し工夫が必要です。
1. package.json に記載されているビルドスクリプトを修正する
"build:js": "esbuild app/javascript/*.* app/javascript/**/*.* --bundle --sourcemap --outdir=app/assets/builds",
2. 読み込みたいviewsファイルに以下を追記する
<%= javascript_include_tag "mofmof/index", "data-turbo-track": "reload", type: "module" %>
ビルドされたファイルも階層が深くなっているので、注意しましょう。
終わり
package.json を修正するのを忘れて、「JSファイルが見つからないってエラーになるなぁ」ということもあると思います。
Rails5や6に慣れてる人は気を付けましょう!