コンパイラかく語りき

import { Fun } from 'programming'

JS開発環境の構築(1)

つくるやつ

React, Webpack, Express, Relay, GraphQLあたりをつかった何か。

内容はあまり重要ではなくて、ひとまずぜんぶJSだけで作ってみたい。

 

ただし、以下の記事でも書かれているように、必要ないものをどんどん盛り込むのは違うと思う。

medium.com

まずは試してみて、何が必要で何が必要でないのか、考えたい。

 

要件

  • ビューはReact。コンポーネントの世界。
  • Webpackによるバンドル。
  • WebpackによるHMRローカル開発環境。
  • ExpressによるSSR
  • State管理は、Realy+GraphQL。

 

最小構成でのReactアプリ

まずは、ReactとWebpackを導入して、最小構成のReactアプリケーションを作る。

パッケージインストール

ひとまず必要なパッケージは以下のとおり(一部抜粋)

gist.github.com

トランスパイルはWebpackにBabelさせる。

 

コンフィグファイル

babelの設定。

gist.github.com

 

webpackの設定

gist.github.com

 

npm scriptsに追記

package.jsonのnpm scriptsにコマンドを登録しておきます。

 

gist.github.com

(一部抜粋)

 

HTML作成

HTMLを作成します。ディレクトリは、public/index.htmlです。

gist.github.com

 

React作成

Reactのコンポーネントを作成します。エントリーポイントとなる、src/client.jsと、コンポーネント部品となるsrc/components/Hello.jsを作成しました。

 

gist.github.com

 

gist.github.com

 

コンパイル&ブラウザ確認

ファイルが出揃いましたので、npm run buildをして、ブラウザでHTMLを確認してみます。

 

f:id:chuck0523:20160628093419p:plain

コンパイルに成功しました。

 

ブラウザ表示すると、このとおり。

f:id:chuck0523:20160628093446p:plain

きちんとコンポーネントレンダリングされていますね。

 

きりが良いので、今回はここまで。

今回は、基本的なReactアプリケーションの開発環境を整えました。ディレクトリ構成は以下のようになりました。

f:id:chuck0523:20160628093848p:plain

 

次回は、WebpackのHMR(HotModulesReloadReplacement)の設定を行います。