Edited at

webpack-railsの導入

More than 1 year has passed since last update.


はじめに

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を配置して設定すればいいかなどをサポートしてくれているように思う。