Rails+Reactにbrowserifyを導入する

react-railsでReactを導入してるRailsアプリにbrowserifyを導入します！

JSのモダンな環境に関してはめちゃくちゃ素人なので調べた過程で読んでよかった！な記事を順番になるようにメモしておきます。

最初に読みたい記事

最初に読んでおいたらいいなと思った良記事。

qiita.com

browserifyとは

browserifyがどういうものか先ずわからないくらいのフロント音痴なのでまずはそこから調べてこう。

browserifyの公式サイトはこちら。

Browserify

Browserify lets you require('modules') in the browser by bundling up all of your dependencies.

そして他にもいくつか参考になったサイトから引用を上げさせてもらいます。

Browserifyの使い方について調べてみた - yutaponのブログ

Browserifyをざっくり説明すると、

ブラウザ上でもNode.js用モジュールを使えるようにするブラウザでもrequire()を使ったモジュール管理を使えるようにするという特徴があるようです。

browser（ブラウザ）+ fy（〜する）という単語からもNode.jsをブラウザ化するってニュアンスでしょうか。

なるほどなるほど。

browserify をはじめてみる - Please Sleep

CommonJS のモジュールの仕組み、つまり Node.js の require をブラウザ上でも使えるようにするもの、ということでいいみたい。Readme を読む限りは、npm にあるモジュールをブラウザ上にもっていくために作られ始めたような印象をうけるが、ちまたのエントリーをみていると AMD に代わりに CommonJS でフロントエンドの依存関係の管理をする (RequireJS ではなく、Node.js 感覚で require 関数をフロントエンドで使う) ためのツールとしても使っていいようだ。

以下のCookpadのtech blogの記事が非常に参考になります。

モダンJavaScript開発環境 on Rails - クックパッド開発者ブログ

ふむふむ。自分はRailsはrailsから外れていくほどつらみが増えていくと認識しているので同じく最後のbrowserify-railsを使う方針がベターかなと思いました。

フロントエンド開発の３ステップ（npmことはじめ） - Qiita

今までは、javascriptのライブラリを使う際、読み込みのためのhtmlタグを書く必要がありましたが、 browserifyを使うと、javascript上で直接ライブラリを参照することができます。普通の言語なら当たり前の機能ですが、ブラウザ上では今までできなかった、というわけです。 browserifyを使うと、node_modules内のライブラリを、直接参照することができます。また、ライブラリ同士の依存も自動で解決されます。ということは npm installでライブラリを持ってきて、何も考えずにrequireで読み込めるということを意味します。