1. Gemfile に追加
gem 'webpacker'
2.webpack インストール
$ bundle exec rails webpacker:install
3.react インストール
$ bundle exec rails webpacker:install:react
4.typescript インストール
$ bundle exec rails webpacker:install:typescript
5.jquery インストール
$ yarn add jquery
6.typescript から jquery を使うための型定義
$ yarn add @types/jquery
そうすると
app/javascript/pack にいろいろファイルができます。
app/views/layouts/application.html.erb に
<%= javascript_pack_tag "application" %>
を追加して
app/javascript/pack 以下のコンパイル
$ bin/webpack
railsサーバー起動
$ bundle exec rails s
を行うと、console にHello World的なのが表示されるはず
bin/webpack をコード変更の度に毎回実行したくない場合
webpackサーバーを別のターミナルで実行すればよろし
$ bin/webpack-dev-server
以上の設定で
pack フォルダの中に
hoge.jsx
aaa.ts
bbb.tsx
とかを置いた場合
<%= javascript_pack_tag "hoge" %>
とか
<%= javascript_pack_tag "aaa" %>
とか
<%= javascript_pack_tag "bbb" %>
をviewに置けばアクセスできます。
コメント