雑にrails 5.1.0.beta1でWebpacker試した感想
技術・テクノロジーこの記事では rails new するまでの手順と実際に触れた感想を書いています。
準備
以下の手順で作成してましたが、
$ mkdir rails5_1_0_beta1-test
$ cd rails5_1_0_beta1-test
$ touch Gemfile
Gemfile
の中身
source 'https://rubygems.org'
gem 'rails', '5.1.0.beta1'
続き
$ bundle install --path vendor/bundle
$ bundle exec rails new . --webpack=react
exist
create README.md
create Rakefile
create config.ru
create .gitignore
conflict Gemfile
Overwrite /Users/yuki/Src/framework/rails/rails5_1_0_beta-test2/Gemfile? (enter "h" for help) [Ynaqdh] y
force Gemfile
run git init from "."
・・・ 省略 ・・・
create package.json
remove config/initializers/cors.rb
run bundle install
Fetching https://github.com/rails/sass-rails.git
Fetching https://github.com/rails/webpacker.git
The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
Fetching gem metadata from https://rubygems.org/.........
Fetching version metadata from https://rubygems.org/..
Fetching dependency metadata from https://rubygems.org/.
Resolving dependencies...
Bundler could not find compatible versions for gem "sprockets":
In snapshot (Gemfile.lock):
sprockets (= 3.7.1)
In Gemfile:
sass-rails was resolved to 6.0.0.beta1, which depends on
sprockets (~> 4.x)
sass-rails was resolved to 6.0.0.beta1, which depends on
sprockets-rails (< 4.0) was resolved to 3.2.0, which depends on
sprockets (>= 3.0.0)
Running `bundle update` will rebuild your snapshot from scratch, using only
the gems in your Gemfile, which may resolve the conflict.
rails webpacker:install
The git source https://github.com/rails/sass-rails.git is not yet checked out. Please run `bundle install` before trying to start your application
rails webpacker:install:react
The git source https://github.com/rails/sass-rails.git is not yet checked out. Please run `bundle install` before trying to start your application
・・・ 省略 ・・・
・・・という感じで途中止まってしまったのでbundle update
します。
$ bundle update
Fetching https://github.com/rails/sass-rails.git
Fetching https://github.com/rails/webpacker.git
・・・ 省略 ・・・
rails webpacker:install
も止まってしまっていたので、やり直す必要があります。
$ bin/rails webpacker:install
create app/javascript
create app/javascript/packs/application.js
exist bin
create bin/webpack-dev-server
create bin/webpack-watcher
create bin/webpack
identical bin/yarn
create config/webpack
create config/webpack/development.js
create config/webpack/production.js
create config/webpack/shared.js
append .gitignore
run ./bin/yarn add --dev webpack webpack-merge webpack-dev-server path-complete-extname babel-loader babel-core babel-preset-latest coffee-loader coffee-script rails-erb-loader glob from "."
yarn add v0.20.3
・・・ 省略 ・・・
React 入れたかったのでrails webpacker:install:react
もします。
$ bin/rails webpacker:install:react
・・・ 省略 ・・・
せっかくなんで React のファイルを見てみましょう。app/javascript/packs/hello_react.js
にあります。
// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
// of the page.
import React from 'react'
import ReactDOM from 'react-dom'
class Hello extends React.Component {
render() {
return <div>Hello {this.props.name}!</div>
}
}
document.addEventListener('DOMContentLoaded', (e) => {
ReactDOM.render(
<Hello name="React" />,
document.body.appendChild(document.createElement('div'))
)
})
まぁ、普通(?)ですね。コメントにもあるように、<%= javascript_pack_tag 'hello_react' %>
を layout ファイルに付け足して動かすようです。
開発時には bin/webpack-watcher
を、bin/rails s
とは別に動かします。
Webpack の設定はconfig/webpack/
にあります。
$ tree config/webpack
config/webpack
├── development.js
├── production.js
└── shared.js
現時点(2017 年 2 月 25 日)での設定ファイルは以下から確認できます。
感想
ここで、他の方の Webpacker に対する感想を見てみましょう。
Webpacker を調べとかないと、安易に導入されて殺されそう
— kjirou (@kjirou) 2017年2月24日
rails/webpacker 使ってみてるけど無限に厳しい表情になる
— おしょーゆ (@_syoyu) 2017年2月15日
webpacker、期待してちゃダメなのか
— inuscript (@inuscript) 2017年2月21日
Webpacker.gemはRails.root以下にjs/などのディレクトリを掘って全部そこに押し込めればよかったのに
— null (@yuroyoro) 2017年2月15日
まぁwebpacker.gemもやってることはwebpackとyarnのwrapperで、ダイジェスト生成とhelper関数の提供だけだから、依存せずに筋力で解決するという対処もありだと思う。ある程度webpackやnpmのこと知らないレールズレンジにニャーはハマることありそう
— null (@yuroyoro) 2017年2月15日
今回webpacker.gemを使ってみた感想として、立ち上がりにサクッとwebpack/es6をレールズに組み込むのは簡単だけど、ディレクトリ構成に難があってjsツール類と相性が悪い、cssのビルドができない(無理やりやったけど)、などがあり、長く使うものじゃないという所感です
— null (@yuroyoro) 2017年2月15日
webpacker.gem入れたけど、生成されたwebpack.configは魔改造してるしdigest生成とhelper_tagは自前で書き直したのでもはや使う意味がなくなった。結論として、レールズとfrontendは完全分離が正義
— null (@yuroyoro) 2017年2月20日
webpacker - Twitter 検索 から一部抜粋。
個人的にも CSS 関連が弱いのが気になります。今後は PostCSS も使われる流れになるでしょうし、今の段階だと Webpacker を使うメリットは限られるんじゃないかな、と思います。
(と、いいつつ自分は PostCSS とかあんまりよくわかっていないのですが・・・。PostCSS や cssnext に関しては以下の記事が参考になると思います。)
PostCSS と cssnext で最新 CSS 仕様を先取り! | HTML5Experts.jp
オレオレ実装で Rails とフロントエンドを分離するのは技術を要する感じがするかもしれませんが、今は知見も溜まっている感じがしますし、必ずしも Webpacker を使う必要はないんじゃないかな、というのが個人的な感想です。
といっても、Rails 側がフロントまわりも頑張っていこうとしているなら、それに乗っかった方が全体として知見が深まりいい感じもしますし、積極的に使っていく or Webpacker に貢献していくのがいいのかな〜とも思います。
理想論かもしれませんが、できるだけがんばっていきたいですね。
2017 年 5 月 5 日追記
Webpacker の config についてのメモ という記事を書きましたが、当記事の執筆時点とは状況がかなり変わってきています。個人的にはいい方向に進んできていると思うので、今後に期待できると思う反面、大きく書き換わる可能性がかなり高いためいますぐ使うのはちょっと怖い気持ちもあります。