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

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

その他のスタッフブログ:

一覧へ戻る

webpack入門〜react.js導入編〜

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

babel

インストール

コーディング

webpackの定義

JOIN OUR TEAM