RailsにES2015環境を構築(browserify-rails, webpack)

browserify-railsで簡単なbabel環境を作ったが、ビルド速度がちょっとストレスを感じるくらい遅かったのでwebpackを使ってみたときのメモです。せっかくなのでbrowserify-railsとwebpackの両方を載せておきます。

とりあえずbabelが動いた程度の環境で、browserify, webpackの細かい使い方などを理解していません。誤りがあればご指摘ください。

ゴール

• RailsのJavaScript環境でモジュールの分割、読み込みをできるようにする
• babelを使ってES2015で書けるようにする

方針

ビルドしたJavaScriptをアセットパイプラインに乗せてsprockets先輩に後のことはお任せする

browserify-rails

substack/node-browserify
browserify-rails/browserify-rails

gemをインストール

gem "browserify-rails"

$ bundle install

Railsのrootにpackage.jsを作成

$ npm init

browselifyをinstall

$ npm install --save-dev browserify browserify-incremental

node_modulesをgitignoreに追加

.gitignore

...
/node_modules

babelをインストール

Using Babel · Babel
babel/babelify
ES2015 preset · Babel

babelを動かすために、babelifyとbabel-preset-es2015をインストールしてbrowselfyでコンパイルさせる

$ npm install --save-dev babelify babel-preset-es2015

babel-preset-es2015はbabel6からES2015の機能が分割されpackageとして必要なものだけを選択して利用できるようになったらしい。今回はなにも考えず全部読み込む。

Railsのrootに.babelrcを作成し、利用するpackageを記述。

{
  "presets": ["es2015"]
}

browselifyのコンパイル設定

config/application.rb

class Application < Rails::Application
...
  config.browserify_rails.commandline_options = '-t babelify'
end

browserify_rails.commandline_optionsでbrowserifyが実行されるときのコマンドオプションを記述できる。babelを使ってコンパイルするようにオブションを設定。

browserify-railsを使えばパッケージをインストールして簡単な設定を書くだけで、gulpを使ってtaskを書いたり、watchfyを使って監視させる必要もなく、ブラウザをリロードさせる度に自動でビルドが走る。また、browserify-railsはsprocketsのディレクティブと共存可能なのでapplication.jsの中に直接requireしても問題なく動く。

ただ、ビルドの速度が遅くて、お試しで書いたhello world程度のコードでも10秒くらい掛かる。

webpack

webpack
Using Babel · Babel
babel/babel-loader

browselifyの時と同様にpackage.jsonを作って必要なpackageをインストール

$ npm init
$ npm install --save-dev webpack babel-loader babel-core babel-preset-es2015

webpack.config.jsを作ってビルドの設定

今回はなにも考えずroot直下に配置

module.exports = {
  context: __dirname + "/app/assets/javascripts",
  entry: "./index.js",
  output: {
    path: __dirname + "/app/assets/javascripts",
    filename: "./bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          presets: ['es2015']
        }
      }
    ]
  },
  devtool: 'inline-source-map',
  watch: true
};

今回はなにも考えずに、モジュールをindex.jsにまとめビルドしたコードをbundle.jsとして吐き出してもらい、application.jsからsprocketsのrequireディレクティブで読み込む。

javascripts/application.js

...
//= require bundle

あとはコマンドラインでwebpackと叩けばwatchモードで立ち上がるのでシコシコ書いてくだけで大丈夫。

browserify-railsに比べて、ビルドがだいぶ速くなった。webpack.config.jsを作る手間はあるが、一度作っておけば、あとコピペして適当なpathに変えるなり、要件に合わせて書けばいいので、たいした手間ではないと思う。

その他の選択肢

browserify + watchify

browserifyでもwatchifyを使えば速いらしい。今回は以前にちょろっとだけ触って雰囲気だけ知っていたので、webpackを使ってみた。どっちがよいとか、どっちもよくわかっていないので今回みたいなRailsに簡単なbabel環境を作るくらいならどっちでもいい気がしている。

sprockets-es6

これもbabelでコンパイルされて、一番手軽そうな選択肢だがimport/exportが使えないらしい。