ume

rails7+esbuildでjsファイルを個別に読み込む

Ruby On Rails Docker Javascript

前書き

rails6とrails7でJsファイルの読み込み方が変わったみたいです。その結果「rails7でjsファイルが読み込めない」というエラーにハマったので、同様のエラーに困っている方の参考にと記事をに残します。

実行環境

rails7でjsファイルを読み込む

全体像

  1. javascriptディレクトリの下にお好きなjsファイル作成。

  2. package.json編集

  3. yarn buildコマンド実行

  4. jsファイル編集

  5. htmlで適用させたいjsファイルを読み込む。

今回は↓「クリックして」をクリックしたら「Hello,World!」と表示されるようにjsファイルを適用させてみます。

javascriptディレクトリの下にお好きなjsファイル作成。

今回私の場合javascriptファイルの中に「custom」ディレクトリを作成し、その中に「index」ファイルを作成しました.

⚠️ディレクトリ名やファイル名は任意でOKです

package.json編集

package.jsonの13行目↓

  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets",
    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
 　"build:custom": "esbuild app/javascript/custom/*.js --bundle --sourcemap --outdir=app/assets/builds --public-path=assets"
// ↑これを追加
  }
}

どうやらこの行を追加することでjavascript/customディレクトリ/jsファイルをbuildディレクトリにbuildするよっていう設定です(この時点ではまだbuildは実行されていません)

"build:custom"
app/javascript/custom/*.js

上記の2つのcustomはディレクトリを指しており、人それぞれ違います。僕の場合はindex.jsがcustomディレクトリの中にあるので上記のような指定になります。

1. yarn buildコマンド実行

下記のコマンドでpackage.jsonで設定したものをbuildします。僕の場合は↓

yarn build:custom

もしjavascriptディレクトリの中に新たにディレクトリを作成せずにjsファイルを配置している方は

yarn build

で大丈夫です。

buildが成功すると

myapp# yarn build:custom
yarn run v1.22.5
$ esbuild app/javascript/custom/*.js --bundle --sourcemap --outdir=app/assets/builds --public-path=assets

  app/assets/builds/index.js      56b 
  app/assets/builds/index.js.map  93b 

Done in 0.25s.

上記のような画面になります。

1. jsファイル編集

buildが終わるとbuildディレクトリの中にjavascriptディレクトリで作成したjsファイルが配置されています。

builde/index.jsファイルの中身を編集

function a() {
  console.log('Hello, World!');
}
  1. htmlで適用させたいjsファイルを読み込む。 index.htmlファイル
<button onclick="a()">クリックして</button>
<%=javascript_include_tag "index" %>

jsファイルを読み込むと完成です。

余談

rails6では以下のようにjsファイルを読み込んでいた

参考情報

【Rails7+esbuild】必要なJavaScriptのみ個別に読み込みたい時 #JavaScript - Qiita