webpack、babel、React - ushumpei’s blog

Reactの環境構築です。できるだけ覚えることを減らしたいので、webpack、babel、reactを軸に必要最低限なものをインストールします。Node.jsの環境が整っている前提です。(npmコマンドが使えればOKかと思います)

それぞれに関するメモです。

webpack: jsxとかes6記法で書いたスクリプトとかをクライアント側に送るためにまとめるビルドツールという認識です。モジュール間の依存性を解決しつつビルドしてくれるそうです。チュートリアルやったらわかった気になれました。loaderというモジュールを追加することで、jsファイルだけでなくcssなどのまとめ方も指定できます。
babel: es6記法を一般的なブラウザで読めるようにコンパイルするもの。webpackでes6記法を含んだファイルをビルドする際に、エンジンとして使いました。インストールのみで特に何もしていないです。
react: jsのテンプレートエンジンです。jsxとして書くのが楽なので書くと、そのままではブラウザで動きません。なのでwebpackで普通のjsファイルにビルドさせます。

設定

パッケージファイルを作成し、必要なパッケージをインストールします。

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

次はwebpackの設定です、設定ファイルを記述しない場合webpackにいろいろオプションを指定して実行することになりますので、ファイルwebpack.confing.jsを作成します。

webpack.config.js

module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: "babel",
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};

このファイルにwebpackコマンド実行時の設定をオブジェクトとして記述していきます。プロパティの説明をします。

entryがビルドしたいスクリプトになります。この例ではentry.jsと設定しています。内部でrequireとか呼び出ししているファイルは、webpackが勝手にまとめてくれます。
outputには出力ファイルのパスと名前を記述します。ディレクトリ構造を考えていないので特にパスは指定してません。
moduleのloadersという配列に、どのファイルをどのようにビルドするかの設定をオブジェクトで記述します。今回は一つだけです。
- testにはどのファイルを対象にするかを正規表現で記述します。今回は拡張子がjsまたはjsxのものを対象にします。
- excludeには除外するもののパターンを記述します。
- loaderはビルドするエンジンを指定しているのだと思います。
- loaderに機能を追加するのがpresetなんだろうか。presetsはes6記法とreactに関するものを指定しました。

次に、順番が前後していますが、entry.jsとReactのコンポーネントと動作確認用のindex.htmlを作りましょう。

entry.js

window.onload = () => {
  require('./Hello.jsx');
}

Hello.jsx

const React = require('react');
const { render } = require('react-dom');

const Hello = React.createClass({
  render: function() {
    return (
      <div className="hello">
        Hello, world!
      </div>
    );
  }
});
render(
  <Hello />,
  document.getElementById('root')
);

index.html

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    <div id="root"></div>
  </body>
</html>

あとはコマンドを叩くだけです。

./node_modules/.bin/webpack

実行完了したらindex.htmlをブラウザで確認してみてください。Reactっぽさはないですが、レンダリングされているのが確認できると思います。

必須ではないですがコマンドの実行はpackage.jsonのscriptsに記述しちゃうと楽です。

package.json

{
  "name": "webpack-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "bundle.js",
  "dependencies": {
    "webpack": "^1.13.1",
    "css-loader": "^0.23.1",
    "style-loader": "^0.13.1",
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "react": "^15.2.0",
    "react-dom": "^15.2.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack --progress --colors"
  },
  "author": "",
  "license": "ISC"
}

以下で起動できるようになります。

npm run webpack

以上です。コードはgithubに上げました。リポジトリ名がチュートリアルとなっていますが全然チュートリアルではないですが。。。

感想

ビルドツールのノリが少しわかりました。ビルドツールが自分にとって身近ではないのは、頻繁にビルドしないからに尽きるんでしょうね。

ともあれようやくReactが動いたので、Reduxのチュートリアルを試すことができます。