rails で webpack + react + typescript + jquery

rails

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に置けばアクセスできます。

コメント

タイトルとURLをコピーしました