Railsのモダンなフロントエンド環境とか良く分からないので、ひとまずRails5+npm+sprockets+bootstrap4

Railsのフロントエンドといえば、ES6をES5へ変換してくれるBabelの利用や、WebPackを利用したフロントエンド環境の構築等がよく記事になっているが、そこらへんの流れについていくのが辛い。

今後はRailsでもnpm・yarnとかを標準で利用していく流れもあるとか。 他にも色々な便利Gemがあるが、どれを利用して良いかわからない。

ということで、ここではひとまず個人サイトなので、 「ES6をサポートしてくれるブラウザでみてね」 という前提(モダンブラウザはほんとんどES6まではサポートしてるみたいだけど)で、自分の「やりたい事」を満たしてくれる、自分なりのフロント環境を構築。

Railsの開発環境の前提はこちらで。

l-chika.hatenablog.com

やりたい事

• ライブラリ等のjavascript,cssの利用はgemやjsファイルを自分で/assetsに配置でなくnpmで管理したい。
• jquery_ujsは利用したい
• sprocketsはそのまま利用
• CoffeeScriptは不要
• Sassを利用
• bootstrap4を利用したい
• 運用をできるだけ簡素にしたい

前提

• Ruby: 2.3.3
• Bundler: 1.13.7
• Rails 5.0.1
• Node: 6.9.4
• npm: 3.10.10

不要なGemを削除

$ vim Gem

以下を削除

• coffee-rails
• jquery-rails

$ rm -rf  vendor/bundle
$ bundle install --path=vendor/bundle

npmでフロントのライブラリ追加

$ npm init -y
$ npm install jquery --save
$ npm install jquery-ujs --save
$ npm install bootstrap@4.0.0-alpha.6 --save

.gitignoreに以下を追加

• /node_modules/
• /public/assets/

application.js、application.cssを変更

application.js

//= require jquery_ujs
//= require_tree .

↓

//= require jquery-ujs
//= require tether/dist/js/tether
//= require bootstrap/dist/js/bootstrap

jquery_ujsとjquery-ujs がアンダースコアとハイフンの違いに嵌った

application.css

ファイル名を変更

application.css -> application.scss

application.scssを修正

*= require_tree .
*= require_self

↓

@import 'bootstrap/scss/bootstrap';

sprockets設定

config/initializers/assets.rb の変更

Rails.application.config.assets.paths << Rails.root.join('node_modules')

を設定

productionモード確認

precompileと表示の確認

$ RAILS_ENV=production ./bin/rails assets:precompile assets:clean
$ vim config/database.yml
$ SECRET_KEY_BASE={HASH} RAILS_SERVE_STATIC_FILES=true ./bin/rails s -e production

確認が終わったら

/public/assets/ を削除

$ ./bin/rails assets:clobber

関連本

Ruby on Rails 5 超入門