読者です 読者をやめる 読者になる 読者になる

Rails+Reactにbrowserifyを導入する

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

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

最初に読みたい記事

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

qiita.com

qiita.com

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 - クックパッド開発者ブログ

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

フロントエンド開発の3ステップ(npmことはじめ) - Qiita

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

browserifyでES6使えるようにする

ということでまずはES6を使えるようにしてみます。

以下で紹介されてるサンプルアプリを参考にさせていただきました。

techlife.cookpad.com

GitHub - hokaccha/browserify-rails-example

このcommitの差分が非常にわかりやすい。。。ありがたい。。。

browserify-rails setting · hokaccha/browserify-rails-example@4587691 · GitHub

ES6についてはとりあえずこれよんどく

Hello, ES6 ~これから迎えるJSのミライ~ - @yoshiko_pg

browserifyとReact Components

babelifyできたら次はReact Componentsを動かせるようにします。以下の記事を参考に設定しました。

qiita.com