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

コンパイラかく語りき

文系新卒プログラマーのメモ

Rails環境にWebpackを導入する(後半)

WebPack React.js Rails ES6 環境設定

どうも、chuckです。

前回は以下の記事を参考に、Rails環境にWebPackを導入してみました。

 

qiita.com

 

その記事がこちら↓

chuckwebtips.hatenablog.com

 

前回までで、環境設定は終わったので、今回は実際にJSを書いてビルドをしてみようと思います。

 

モダンJavaScriptを書く

せっかくReactとES6のための環境を用意したので、両方を使ったモダンなJavaScriptを書いてみます。

 

書いた記事がこちら。

gist19211423822a15d8f6f8

 

このコードをWebPackとBabelを利用してコンパイルします。

$ npm run build

 

結果、error

記述が間違ってました。

 

gista6a88dee60ca01cf0147

色々とひどい…。

 

今一度、コンパイルします。

すると、設定通り、assets/javascripts/にコンパイル済みのJSのファイルが生成されました。

 

gist9b43bbcae2ac4565882d

 

ちなみに、コンパイル後のapplication.jsを開くとAtomが固まりました。

f:id:chuck0523:20160117222227p:plain

 

インクルードの確認

では、生成されたJSファイルをインクルードしてみます。

まずは新しいviewを作成します。

f:id:chuck0523:20160117224047p:plain

 

次に、viewファイル内にてJSファイルを読み込みます。

f:id:chuck0523:20160117224149p:plain

 

最後にローカルホストを開いて確認します。

f:id:chuck0523:20160117224210p:plain

出ました!きちんとRenderが行われています!

 

というわけで、RailsへのWebPackの導入をこれにて終了します。お疲れ様でした。