hidekatsu-izuno 日々の記録

プログラミング、経済政策など伊津野英克が興味あることについて適当に語ります(旧サイト:A.R.N [日記])

続 React 始めました。相変わらず React.js + Webpack の環境構築。

前回の記事では、Webpack 遅すぎて困ったという話で終わってしまったのだけど、その後、webpack dev serverを使えばリアルタイムプレビューできるよという噂を聞きつけ使ってみたところ、即座に反映することが確認できた。

動作を見る限り、オンメモリで差分を調べながらコンパイルしているように見える。

手順 1. Node.js のインストール

前回同様、Node.jsのサイトから長期サポート版の4.2.2をインストール。

手順 2. package.json の作成

npm init で package.json を生成後、dependencies を記載する。本来は単にインストールすればよいだけのはずなのだけど、webpack 用の babel-loader の依存性の問題でなぜか古いバージョンの babel がインストールされてしまう。現段階ではバージョンを明示する必要があるようだ。

{
  ...
  "dependencies": {
    "react": "^0.14.2",
    "react-dom": "^0.14.2"
  },
  "devDependencies": {
    "babel-core": "^6.1.21",
    "babel-loader": "^6.1.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "css-loader": "^0.23.0",
    "node-sass": "^3.4.2",
    "sass-loader": "^3.1.1",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.6",
    "webpack-dev-server": "^1.12.1"
  }
}

あとはコマンドラインから一括でインストール。

> npm install

手順 3. webpack.config.js の作成

内容的には前回と変わらないが、パフォーマンスを上げるため、一旦 sourcemap と minify は外した。

wepack-dev-server はファイルを物理的には生成せず、HTTP上に動的に生成されるため、どのURLに生成するかを output.publicPath にて指定している。

module.exports = {
  context: __dirname,
  entry: {
    app: './src/main/js/app.js'
  },
  output: {
    path: './src/main/webapp/js',
    publicPath: '/js/',
    filename: '[name].js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          cacheDirectory: true,
          presets: [ 'react', 'es2015' ]
        }
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        loaders: [ 'style', 'css', 'sass' ]
      }
    ]
  }
}

手順 4. npm run から実行できるようにする。

webpack-dev-server はコマンドラインからでも実行できるが、package.json に追記すると簡単に起動できる。

  ...
  "scripts": {
    "start": "npm run dev",
    "dev": "webpack-dev-server --content-base src/main/webapp/"
  },
  ...

コマンドラインから実行。

> npm start

ブラウザで http://localhost:8080/js/app.js を実行すると変換された app.js が表示されることが確認できる。試しに app.js を書き換えると、ファイルが監視されており即座に画面のリフレッシュがかかる。

あとは、JavaEE サーバとどうやって組み合わせて使うか。普通は Apache とかでパスをマウントして同じドメインに見せかけるとかするんですかね? 本番はともかく開発環境でそれは面倒なので、なんとかしたい気もする。