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をブラウザで表示してみます。
