Rails4アプリケーションへのWebpack導入

  • 6
    いいね
  • 0
    コメント

About

Heroku上のRails4フロントエンドJSをいい感じにする活動の一環

As-Is

  • 多くのJSライブラリをRailsバインディングで使うRails4アプリ
  • JSはasset pipelineで配信
  • 新規JSライブラリ導入
    • Railsバインディングが用意されているか毎回調査
    • Railsバインディングのメンテのペースに制約される
      • セキュリティなどの問題解決が遅れることがある
  • 今後はnpmでの導入前提での情報のほうが多そう

To-Be

  • npmモジュールの更新に追随し、Node.jsのエコシステムの恩恵をより享受できるようにする
  • 最初の目標として、npmで導入したモジュールの動作をローカルとHerokuで確認する
  • 既存JSコードベースの変更を最小限に留める

今回のスコープに入らないこと

  • JSのローカル開発の効率化
  • React関連の整理
  • CSSの取り回し

バージョン

  • node: v4.1.2
  • npm: 2.14.6
  • Rails: 4.2.5

bundleツールの選択

Webpack or Browserify

Google Trends

Screen Shot 2016-09-29 at 3.04.14 PM.png

とりあえずWebpackをつかってみる

ローカルで動かす

ディレクトリ構成

$ mkdir -p frontend/config/production frontend/src/javascripts

package.json作成

$ npm init
$ npm install webpack --save

npmモジュール追加

なんでもよいが、たとえばautotrackをインストールしてみる

$ npm install autotrack --save

scripts追加

Webpackを叩くscriptを登録する。

package.json
{
  "name": "YOUR-APP",
  "version": "1.0.0",
  "description": "== README",
  "main": "index.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "webpack:deploy": "webpack -v --config frontend/config/production/webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autotrack": "^1.0.3",
    "webpack": "^1.13.2"
  }
}

Webpackの設定

frontend/config/production/webpack.config.js
module.exports = {
  entry: {
    app: './frontend/src/javascripts/app.js',
  },
  output: {
    path: './app/assets/javascripts',
    filename: "[name].bundle.webpack.js",
  },
}

require/export

frontend/src/javascripts/app.js
autotrack = require('autotrack')
module.exports = [autotrack]

ビルド

$ npm run webpack:deploy

app/assets/javascriptsapp.bundle.webpack.jsが生成される。
ファイルの存在を確認し、マニフェストからrequireないしrequire_treeする。

app/assets/javascripts/application.js
//= require_tree .

動作確認

Railsサーバーを起動し、ブラウザのdevコンソールで見る

Screen Shot 2016-10-13 at 10.24.18 AM.png

Herokuで動かす

scripts追加

先程追加したscriptをheroku上で起動させるheroku-postbuildを登録しておく(これに気づかずハマった)

package.json
  "scripts": {
    "webpack:deploy": "webpack -v --config frontend/config/production/webpack.config.js",
    "heroku-postbuild": "npm run webpack:deploy",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Buildpack追加

webpackでのファイル生成がRailsのprecompileの前に行われるようにBuildpackの順番を調整する。

$ heroku buildpacks:clear --app YOUR-APP
$ heroku buildpacks:set heroku/nodejs --app YOUR-APP
$ heroku buildpacks:add heroku/ruby  --app YOUR-APP

app.jsonで指定する方法もあるようだが試していない。

Herokuへpush

$ git add package.json frontend

commitしてHerokuへpushする

動作確認

Herokuアプリを開き、ローカル同様にブラウザの開発者コンソールで確認

参考