webpackとbabel-loaderを使ってReact用のjsxファイルを変換します。
使う道具
- webpack
- babel-loader
- babel-core (babel-loaderに必要です)
- babel-plugin-transform-react-jsx
対象
jsxファイル
index.jsx
const React = require('react')
const ReactDOM = require('react-dom')
const App = () => <div>Hello, world!</div>
ReactDOM.render(<App />, document.querySelector('#container'))
をwebpackを使ってJavaScriptにトランスパイルします。
読み込むhtmlファイル
index.html
<!DOCTYPE html>
<html>
<body>
<div id="container"></div>
<script src="bundle.js"></script>
</body>
</html>
手順
準備
package.jsonを作ります。
npm init -y
必要なnpmモジュールをインストールします。
npm i -D webpack babel-loader babel-core babel-plugin-transform-react-jsx react react-dom
webpackの設定ファイルを作ります。
webpack.config.js
module.exports = {
entry: './index.jsx', // エントリポイントのjsxファイル
output: {
filename: 'bundle.js' // 出力するファイル
},
module: {
loaders: [{
test: /\.jsx?$/, // 拡張子がjsxで
exclude: /node_modules/, // node_modulesフォルダ配下でなければ
loader: 'babel', // babel-loaderを使って変換する
query: {
plugins: ["transform-react-jsx"] // babelのtransform-react-jsxプラグインを使ってjsxを変換
}
}]
}
}
実行
node_modules/webpack/bin/webpack.js
ブラウザで、index.htmlファイルを開いてHello, world!が表示されたら、成功です。
その他
以前はjsx-loaderというローダーもありました。今は非推奨です。