Yarn + webpack + BabelでReactの開発環境を作る
はじめに
最近マストドンのカスタマイズとかでReactを触るのでこの機会に勉強したく、まずは開発環境を作るところから。
MacでHomebrew、Node.jsはインストール済み。
手順
Yarnのインストール
$ brew install yarn
プロジェクトフォルダ作成
$ mkdir project-name
$ cd project-name
初期化
$ yarn init
入力項目はいったんデフォルトのままで。pakages.jsonが作成されます。
パッケージインストール
$ yarn add react react-dom
$ yarn add webpack webpack-dev-server babel-loader babel-core babel-preset-react babel-preset-es2015 --dev
ファイル追加・編集
src/app.jsx
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
dist/index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello React</title>
</head>
<body>
<div id="root"></div>
<script src="./bundle.js"></script>
</body>
</html>
webpack.config.js
var path = require('path');
module.exports = {
entry: './src/app.jsx',
output: {
path: path.resolve('dist'),
filename: 'bundle.js'
},
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
]
},
devServer: {
contentBase: path.resolve('dist'),
},
};
packages.json
"scripts": {
"build": "webpack --progress",
"start": "webpack-dev-server --inline"
}
を追加。
動作確認
$ yarn start
localhost:8080 で確認できます。jsを編集すると自動でビルドとブラウザのリロードが行われます。
ビルド
$ yarn build