ブログBlog

    • webpack入門〜react.js導入編〜

    • 2016年7月25日
    • react.js
    • webpack

webpackでreact.jsのビルドも行う

前回:webpack入門 前回は複数のjsファイルを一つにまとめる、という内容について触れましたが、今回はreact.jsの独自規約であるjsxのjsへの変換を同時に行えるようにします。と同時に、ES6で書いたjsを様々なブラウザで解釈できるよう、ES5に変換もできるようにします。

babel

jsxとか、ES6への変換は「トランスパイル」と呼ばれています。 このトランスパイルをするのに便利なライブラリ(トランスパイラ)群がbabelです。 reactのトランスパイルに必要なbabel-preset-reactですとか、ES6のトランスパイルに必要なbabel-preset-es2015といったように、babel-〜を組み合わせて使うようになっています。

インストール

今回、直接プロジェクトにbabelをインストールするため、npmでインストールできるようにしておく必要があります。 以下のコマンドを実行します。
$ npm init
と打つと、いろいろ聞かれますので、適当に答えていきます。 最後にyesと打つと、package.jsonがプロジェクト直下に作成されます。 reactで実装しますので、react関連をインストールします。
$ npm install react react-dom --save-dev
最後に必要なbabel〜をインストールします。 webpackもプロジェクトにインストールする必要があります。
$ npm install --save-dev webpack babel-loader babel-core babel-preset-react babel-preset-es2015

コーディング

コンポーネントを作成し、ブラウザで表示できるところまでやってみましょう。
react.jsの詳しい書き方については、 ES5のReact.jsソースをES6ベースに書き換える ですとか、 今からはじめるReact.js〜初めてのコンポーネント〜 などをご参照ください。
前回のhello.jsはをhello.jsxと拡張子を変え、コンポーネントにします。
//hello.jsx
import React from 'react';

class Hello extends React.Component{
  render(){
    return (
      <p>Hello {this.props.name} !!</p>
    );
  }
}
Hello.propTypes = {
  name: React.PropTypes.string.isRequired
};

export default Hello;
index.jsおよびindex.htmlもreactに対応させます。
//index.js
import Hello from './hello.jsx';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <Hello name="webpack" />,
  document.getElementById('content')
);
//index.html
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Webpack Tutorial</title>
</head>
<body>
  <script src="dist/bundle.js"></script>
  <div id="content" />
</body>
</html>

webpackの定義

コーディングができたら、webpack.config.jsを編集します。 moduleのloadersを追加します。 それぞれの意味については、 http://dackdive.hateblo.jp/entry/2016/04/13/123000 が詳しいです。
//webpack.config.js
module.exports = {
  entry: {
    index: './client/js/index.js'
  },
  output: {
    path: __dirname + '/client/dist',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: "babel",
        query:{
          presets: ['react', 'es2015']
        }
      }
    ]
  }
};
できたらビルド
$ webpack
して、index.htmlをブラウザで表示してみます。 スクリーンショット 2016-07-22 22.05.04

この記事を書いた人 : 國田健史

一覧へ戻る

開発についてのお問い合わせはこちら

お問い合わせ

JOIN OUR TEAM

積極採用しています。私たちと一緒に働きませんか?