webpackerについて
前回webpackerをインストールする際、こんな記事を書きました。
Webpackerとは (Rails6で rails s してエラーが出た時の話)
webpackerの構成
webpackerのインストールで生成されたディレクトリapp/javascript/packsの中に
application.jsというファイルが作成されます。
webpackerはapp/javascript/packsディレクトリにあるファイルをエントリポイントとしてコンパイルを実行します。
それ以外のjsファイルはapp/javascript配下の他のディレクトリに置き、app/javascript/packs/application.jsから読み込みます。
(※エントリポイント・・・コンピュータプログラムを実行する際に、一番最初に実行することになっている箇所のこと。ここでは "コンパイルを開始するファイル" の意味。)
例:
app/
├ javascript/
│ └channels/
│ └ packs/
│ └ application.js (エントリポイント)
└ example/
└ example.js
app/javascript/packs/application.js
// デフォルトの記述
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
// example.jsを読み込む
import '../example/example'
app/views/layouts/application.htmlに下記を記述することで、コンパイルしたjavascriptをビューで読み込むことができます。
app/views/layouts/application.html.slim
// slimの場合
= javascript_pack_tag 'application'
// ERBの場合
<%= javascript_pack_tag 'application' %>
もうちょっと詳しく
加筆予定です。
RailsアプリにReactを導入してみようと思います。