Webpack + React + ES6の最小構成を考えてみる。

javascript フレームワーク 開発環境

Webpack + React + ES6

Webpack + React + ES6の最小構成を考えてみる。

この記事は明石家サンタを見ながら書かれました。

(注: 2016/9/25 内容を大幅に改定、WebpackやReactの最新版に対応)

関連した過去記事

Webpack入門編 uraway.hatenablog.com

Gulp + Browserifyを用いた環境ビルド uraway.hatenablog.com

React Tutorial uraway.hatenablog.com

プロジェクトセットアップ

$ npm init

インストール

webpackとreactをまずはインストール。 dev serverのグローバルインストールにはsudoコマンドが必要かも。

$ npm install --save react react-dom
$ npm install --save-dev webpack webpack-dev-server

ReactとES6のトランスフォームに必要なものをインストール。

$ npm install --save-dev babel-loader babel-core babel-preset-react babel-preset-es2015

依存関係はこんな感じ package.json

"devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.1"
},
"dependencies": {
    "react": "^15.3.2",
    "react-dom": "^15.3.2"
}

Reactコンポーネント

ReactとES6を使って、コードを書いていく。 プロジェクトの構成は次の通り。

webpack-react
      |___dist/
      |     |____index.html
      |___src/
      |     |___comonents/
      |     |       |____hello.jsx
      |     |       |____world.jsx
      |     |___main.jsx
      |___webpack.config.js
      |___package.json

Webpackが出力するファイルを読み込むhtmlファイル:

<!-- dist/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello React</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/bundle.js"></script>
  </body>
</html>

"Hello"を表示するコンポーネント:

// src/components/hello.jsx
import React, { Component } from 'react';

export default class Hello extends Component {
    render() {
        return (
            <h1>Hello</h1>
        );
    }
}

"World"を表示するコンポーネント: statelessなので次のように記述することも可能。

// src/components/world.jsx
import React from 'react';

const World = () => {
    return (
        <h1>World</h1>
    );
}
export default World;

Webpackでバンドルする

main.jsxとwebpack.config.jsを追加。

// src/main.jsx
import React from 'react';
import { render } from 'react-dom';

import Hello from './components/hello.jsx';
import World from './components/world.jsx';

render(
    <div>
        <Hello />
        <World />
    </div>,
    document.getElementById('app')
);

エントリとローダー、プリセットを指定:

// webpack.config.js
var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './src/main.jsx',
  output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
}

次のコマンドを叩いてhttp://localhost:8080/webpack-dev-server/dist/index.htmlをブラウザで開く:

$ ./node_modules/.bin/webpack-dev-server --progress --colors --hot

f:id:uraway:20151225011251p:plain