Railsアプリにwebpackerの導入

この記事で行うこと

webpackerの導入

使うもの

Ruby 2.4.2

Rails 5.1.6

前提

（Tutorialをしている人は）予約機能の作成 - さがえもん まで完了していること。

webpackerとは

Webpackerとは、Webpackを用いてRails上でJavaScript開発をするために必要な一連の流れを提供してくれる、Rails organizationで開発されているgemです。

Railsの開発プロセスに沿ったJSのパッケージ管理・エントリーポイントの制御ができることが導入のメリットになります。

現場では？

以下の記事がうまくまとまっています。というか、参考にさせていただきました。 techlife.cookpad.com

RailsにおいてJavaScriptのパッケージ管理方法はたくさんありますが、 現状もっともRailsの開発プロセスにのっとった管理方法を採用しているのがwebpackerになります。

実装手順

インストール

Gemfile

gem 'webpacker'

webpackerの設定ファイルをインストール

bundle exec rails webpacker:install

するとapp配下にjavascriptフォルダが作成されます。 今後、Javascriptは、app/javascript/packs配下に拡張子.jsでファイルを作成してコードを書いてください。

動作確認

webpackerが正常に動作するかどうかを確認します。

• applicationが動作しないことを確認する

option（alt）+ command（⌘）+ i

でデベロッパーコンソールを開きます。 「Console」タブに何も表示されないことを確認します。

application.html.hamlに javascript_pack_tag を書いてください。

app/views/layouts/application.html.haml

・・・・・
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application' # 追加
  %body
・・・・・

ページをリロードするとデベロッパツールのConsoleに「Hello World from Webpacker」が表示されます。 これで動作確認完了です。

動作確認で記述した以下のコードは消しておいてください。このコードをapplication.html.hamlで書いてしまうと、全てのファイルでapplication.jsが呼び出されてしまいます。 必要なhamlファイルにのみ javascript_pack_tag でjsファイルを呼びましょう。

app/views/layouts/application.html.haml

・・・・・
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application' # 削除
  %body
・・・・・

参考

github.com techlife.cookpad.com github.com

質疑応答

コメントしてください。