こんにちは、エンジニアのケントです。
2017年のフロントエンドの開発において、Webpackが大人気です。
イタンジのプロダクトはRailsで開発することが多いのですが、WebpackをRailsに導入することを考える場合、大きく分けて二つの選択肢が考えられます。
- rubygemのWebpackerを使う
- WebpackとRailsを独立して使う
直近で二つのイタンジのRailsプロダクトにWebpackを組み込むお仕事をし、上記の両方を試してみたので、それぞれの導入方法と雑感、pros and consをまとめてみようと思います。
rubygem webpackerを使う
導入方法
webpackerは、Rails5.1から標準で導入されるwebpackのラッパーです。 導入方法はwebpackerのreadmeにだいたい載ってるので、詳細はそちらにお任せしますが、結論だけ説明すると
gem 'webpacker', github: 'rails/webpacker'をgemfileに追記するbundle installするbin/rails webpacker:installコマンドを打つ
たったこれだけでwebpackによる開発をスタートすることができます。
webpacker導入後、Railsのディレクトリ構成が変わりますが、ざっくりいうと以下のような構成が追加されます。
├── app
│ └── javascript --①
├── config
│ └── webpack --②
├── public
│ └── packs --③
webpackerでは、①で主なソースコードを書き、②で開発環境を定義し、③に開発の成果物を配信する形になります。
雑感
しかし、この②の部分がなかなかの曲者でして、なかなか複雑なディレクトリ構成となっています。
├── config
│ └── webpack --②
│ ├── configuration.js
│ ├── development.js
│ ├── development.server.js
│ ├── development.server.yml
│ ├── loaders
│ │ ├── assets.js
│ │ ├── babel.js
│ │ ├── coffee.js
│ │ ├── erb.js
│ │ ├── react.js
│ │ └── sass.js
│ ├── paths.yml
│ ├── production.js
│ ├── shared.js
│ └── test.js
このように開発環境を定義するファイルが乱立しているため、より込み入ったフロントエンドの開発をしたくなったタイミング等で開発環境を変更しようとした際に苦労する印象です。
（後編で解説しますが、単純にWebpackによるjs開発環境を用意するだけならこのような複雑な構成にはなりません。） とはいえモダンなjs開発環境をgemを入れてコマンドを打つだけで用意できるのは大変素晴らしいと思いました。
後編はWebpackとRailsを独立して使う方法を解説し、rubygemのWebpackerを使う方法との比較をしようかと思います。
