reactjs - react-railsでhello world!! - Qiita でやったhello worldをES6が使える状態に持って行くまでのメモ。
最終的な完成型はコチラ：takayukishmz/react-rails-browserify-es6
今回やること
方法はいくつあるが、今回は以下。
- Babelを使ってES6をES5に変換
- browserifyを使ってnodeのmodule/requireを使えるようにする
npmでパッケージ管理
gemで対応できることもありますが、まずはnpmから直接いれるバージョンでいく。
まずnpmがないと困るので入れる。
brew install npm
次にnpmの初期化で、npm initでもいいが今回はpackage.jsonを下記のように作成。
{
"name": "something",
"dependencies": {
"react": "^0.13.3"
},
"license": "MIT",
"engines": {
"node": ">= 0.10"
},
"devDependencies": {
"babelify": "^6.3.0",
"browserify": "~> 10.2.4",
"browserify-incremental": "^3.0.1",
"coffee-script": "^1.10.0",
"glob": "^5.0.14",
"gulp": "^3.9.0",
"gulp-babel": "^5.2.1",
"reactify": "^1.1.1",
"vinyl-source-stream": "^1.1.0"
},
"scripts": {
"start": "gulp watch & rails s"
}
}
個々のライブラリの説明はいったん省略。動くとこまでやってから個々で調べてみるとよい。
gulpでビルドコマンドをつくる
gulpとは
The streaming build system
gulpjs/gulp
とあるように、nodeのstreamをつかったビルドシステム。
gulp buildとかgulp watchとかtaskを作成できる。
gulpfile作成
gulp = require 'gulp'
babel = require 'gulp-babel'
browserify = require 'browserify'
source = require 'vinyl-source-stream'
glob = require 'glob'
gulp.task 'build', ->
files = glob.sync './frontend/javascripts/**/*.{js,jsx,coffee}'
browserify
entries: files,
debug: true
.transform 'babelify'
.bundle()
.pipe source 'bundle.js'
.pipe gulp.dest 'app/assets/javascripts/components'
gulp.task 'watch', ->
gulp.watch('./frontend/javascripts/**/*.{js,jsx,coffee}', ['build'])
gulp.task 'default', ['build']
ざっくり説明するとbabelで6to5変換、browserifyでnodeのmoduleをクライアントでも使えるようにして、frontend/javascripts/以下のファイルを, app/assets/javascripts/componentsのbundle.jsファイルにコンパイルしている。
jsxファイルをfrontend/javascript/components/以下に移動
'use strict';
class HelloWorld extends React.Component {
render() {
return (
<div>
<h1>Hello world!</h1>
</div>
);
}
}
window.HelloWorld = HelloWorld;
class -- extends や method() {}はES6記法。
window.HelloWorldと、グローバルに配置しているのは、
<%= react_component('HelloWorld') %>
react-railsのreact_componentヘルパーを使ってrenderingしているため、そうしないとヘルパー内で参照できないから。ここはあんまりしっくり来ないけどとりあえずこれでいく。
gulp buildでコンパル
もう準備はほぼ完了。
$ gulp build
とコマンドを打つと
$ gulp build
[23:51:36] Requiring external module coffee-script/register
[23:51:38] Using gulpfile ~/work/react/react-rails-browserify-es6/gulpfile.coffee
[23:51:38] Starting 'build'...
[23:51:39] Finished 'build' after 1.38 s
となりビルド完了。app/assets/javascripts/components/bundle.jsにコンパイル後のコードが吐出される。多少まだ読める状態なので一度見てみるとes5でどう書かれるかわかっておもしろいかも。
確認
あとはいつもどおり
rails s
からの
open http://localhost:3000
で「Hello World!」 と見れたら終了。お疲れ様でした。
ちなみにbrowser-railsのgemを使ったバージョンも一応別ブランチで作成したので、ご参考まで。詳細は別途。
takayukishmz/react-rails-browserify-es6 at browserify_rails
es6化といいつつ、es6の記述がほぼないですが、この環境下であれば使用可になってます。