Reactの環境開発でだいぶつまずいたのでメモ
環境
node 8.11.1
npm 5.7.1
構築手順
作業ディレクトリの作成
mkdir react-sample && cd $_
package.jsonを生成します
npm init -y
以下のように生成されます
package.json
{
"name": "react-sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
babelのパッケージをインストールします
-Dは--savedevでもいい。devDependenciesに自動的に記録されます。
$ npm i -D babel-core babel-loader babel-preset-env babel-preset-react babel-preset-es2015
babelの設定ファイルを作成
touch .babelrc
.babelrcは以下のように作成
{
"presets":["es2015"]
}
ソースコードを入れるディレクトリとコンパイル後のコードを入れるディレクトリを作成します
mkdir src dist
webpackとwebpack-cliをインストールします。
$ npm i -D webpack webpack-cli
webpack.config.jsの作成
touch webpack.config.js
webpack.config.jsは以下のように作成します。
webpack.config.js
module.exports = {
mode: "development",
entry:__dirname + '/src/app.js',
output: {
path:__dirname + '/dist',
filename:'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader:'babel-loader',
options:{
presets:[
['env',{'modules':false}],
'react'
]
}
}
]
}
]
}
};
reactのパッケージのインストール
npm i -S react react-dom
Reactのコードをかきます
touch src/app.js
app.jsは以下のように作成します
app.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
class App extends Component {
render() {
return (
<h1>Hello world!</h1>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('main')
)
htmlファイルを用意します
touch index.html
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>React-sample</title>
</head>
<body>
<div id="main"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>
コマンドでビルドできるように設定します
package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build:dev": "webpack --mode development",
"build:pro": "webpack --mode production"
},
npm run build:devでビルドできるようになりました
次にwebpack-dev-serverをインストールします。
以下のコマンドを入力します。
npm i -D webpack-dev-server
これもコマンドで動かすことができるように設定します。
package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build:dev": "webpack --mode development",
"build:pro": "webpack --mode production",
"start": "webpack-dev-server --mode development"
}
npm startでserverを動かすことができます。
ビルドしたあとにnpm initすることで以下のような画面になります
以上で完成です