webpackを使用したReact.jsのjsxのビルド

React.jsで使用するjsxのビルド方法について調べた。
web packを使用すると良さそう。

webpackとは

必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール、らしい。
jsxは、普通にも使用できるが、コンパイルをかけないと遅いようなので、
webpackを使用してコンパイルする。

要npm。
npmについてはこちらを参照。

www.atmarkit.co.jp

webpackの導入

まずはnpm initをし、web packのインストール。
インストール時に--save-devオプションを付ければ、package.jsonに自動的に追記されます。

npm init
npm install webpack babel-loader babel-core babel-preset-es2015 --save-dev

babelはjsxのビルドに必要。
その他の項目はjsxを正常にビルドできなかったので調べて追加した。
web packは、ビルドしたいコンポーネントに応じて**-loaderをインストールする必要あり。 同じディレクトリ内にビルド設定ファイル、webpack.config.jsを作成し、中身を以下のようにする。

module.exports = {
  // ビルド対象のファイルのパス
  entry: __dirname + "/src/main.js",
  // ビルド後のファイルパス
  output: {
    path: __dirname + "/dist",
    filename: "like-button.js"
  },
  // 各種loaderの設定
  module: {
    loaders: [
      {
        // .js拡張子のファイルのビルド設定
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query:
          {
            presets: ['es2015', 'react']
          }
      }
    ]
  }
};

これで、ターミナル上でwebpackコマンド実行でビルドが走る。
npm のビルド設定にwebpack のビルドを追加しておくと良い。
package.jsonに以下の内容を追加。
npm run buildとnpm run watchにwebpackコマンドを関連付けさせる。

  ...
  "scripts": {
    ...
    "build": "rm -rf dist/.*js && webpack",
    "watch": "rm -f dist/.*js && webpack -w"
  },
...

あとはnpm run watchとしておけば、ファイルに変更があった際にビルドが走る。