webpack-railsの導入

はじめに

browserify-railsを使っていたが、webpackでやった方がトラブルが少なそうだったので移行した。

導入

webpack-railsを使用した。
Readmeの通りに進めれば簡単に導入できる。

移行

今までproject_name/app/assets/javascriptにあったものをproject_name/webpackに移動する。
cssもコンパイルできるようだが、こちらはrailsにまかせても良いと思う。

jsの読込をjavascript_include_tag 'application'からjavascript_include_tag *webpack_asset_paths('application')に変更が必要です。

また、ここでのapplicationの意味がファイル名による規則指定からconfig/webpack.config.js内の'application':'./webpack/application.js'のような定義指定に変わることに注意が必要です。

加えて以下のコードをwebpackに移動させる必要がある。

//= require jquery
//= require jquery_ujs

少し悩んだが、以下のように対応した。

package.json

{
  "dependencies": {
    "jquery": "*",
    "jquery-ujs": "*"
  }
}

application.js

window.jQuery = require("jquery")
require("jquery-ujs")

最後にbabel対応しないと動かないブラウザがあると考えられるので対応する。
http://qiita.com/HayneRyo/items/74892d3a37ee96a5df60

本番

rake webpack:compileを忘れずに実行しましょう。

ローカルで本番の見栄えを確認するにはRAILS_ENV=production SECRET_KEY_BASE=SECRET_KEY_BASE RAILS_SERVE_STATIC_FILES=true rails sのようなコマンドで確認できます。
※ DBの設定もお忘れなく

まとめ

webpackのようなものを導入するのにはnode.jsに関する知識が少し必要になるが、最近のJavaScriptはES6が前提となってコードが書かれている事も多く、むしろ使わないとサンプルすら理解し難い。

browserify-railsのような中間ソリューションをつかった場合に起きるデメリットも若干ある。webpackを学ぶことは、少し学習コストが高いが、それでもwebpackを導入したほうがトータルでは簡単になると思われる。

webpackを単独でrailsに導入したことが無いので本当のところは分からないが、webpack-railsを使うことにより、どのようにwebpackを配置して設定すればいいかなどをサポートしてくれているように思う。