Rails でふわっとモダンっぽい JavaScript 開発

webpack を使う。

ツイッターでBrowserify良いとかアホっぽくつぶやいたところ元上司から

@mayutan 今から使うならwebpackでいいんじゃないかな

— nekoya (@nekoya) 2016年7月6日

とか反応があったのでwebpackに鞍替え。クライアント側はテンプレートとべったりなので完全分離はあきらめる。そこで割りきって適当に離すことにする。↓ここを参考に。

http://clarkdave.net/2015/01/how-to-use-webpack-with-rails/
http://qiita.com/necojackarc/items/afa674ab10aafa9784eb

前提

• Rails　初心者
• Rails　4.2.1
• Rails　ちゃんにインされてる JQuery であれこれ実装されている。
• javascript は project/app/assets/javascripts/ 以下にすべて配置してある。
• Rails　ちゃんが　precompile したものが project/public/assets/javascripts/ 以下にコピーされる。
• project/app/assets/javascripts/app 以下に angular アプリを置く。
• あまりこだわると死をみるのでゆるく。

インストールなど準備

• ES6 で書いてみようと思うので project 直下で

npm install -g webpack
npm install -D webpack babel babel-loader babel-core
npm install --save angular

• babel の preset を使う

npm install -D babel-preset-es2015 babel-preset-stage-2

• 開発環境でビルドできるように設定

project/app/assets/javascripts/app/config/development.js

module.exports = {
  devtool: 'inline-source-map',
  entry: {
    application: './app/assets/javascripts/app/app.js',
  },
  output: {
    path: './app/assets/javascripts/app',
    filename: '[name].js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel?presets[]=es2015,presets[]=stage-2'
      }
    ]
  }
}

• 適当に angular っぽいのを書いてみる。

project/app/assets/javascripts/app/app.js

import angular from 'angular';
import testCtrl from './controllers/testCtrl';

export default angular.module('testapp', [])
  .controller(testCtrl.name, testCtrl)

app/assets/javascripts/app/controllers/testCtrl.js

export default class testCtrl {
  constructor() {
    console.log('test');
  }
}

app/views/test.html

<div ng-controller="testCtrl"></div>

ビルドコマンドを追加

package.json

"scripts": {
    "release": "webpack --config app/assets/javascripts/app/config/production.js",
    "build": "webpack --config app/assets/javascripts/app/config/development.js",
    "watch": "webpack --watch --config app/assets/javascripts/app/config/development.js"
  }

• 面倒なので rake task にして assets:precompile で実行されるようにする

lib/tasks/precompile.rb

task :build_frontend do
  sh "npm install"
  sh "npm run release"
end

Rake::Task["assets:precompile"].enhance(%i(build_frontend))

こうすると bundle exec rake assets:precompile の前に勝手にビルドしてくれる。

• view への反映。Rails の流儀？ここに追加

project/app/assets/javascripts/application.js

//=require app/appllication.js

ビルドしてブラウザにアクセスすると

じゃーん

結論

レイルズはクソ
angular1.x 系で ES6 にこだわるのは死。無理して書くことはない

ざっくり書いたけど、あれこれエラったりその他諸々ほんとにはまりまくりまクリスティ。なんでもかんでも Rails に邪悪に組み込まれていて辛さしかない。だいたいすぷろけっつがゴミすぎ。いにしえのフレームワークで今は使う必要ないという感じ。

• あとこれだとせっかくファイルを分割できるという webpack の良さが全く生きない。
• angular2 を使うなら react 使っったほうがいい気もする。