[React] React + webpack + babel + flow の導入手順を確認する

続きに相当する記事。

[markdown]

“`prettyprinted
React v16.3.2
Babel v6.26.3
Flow v0.72.0
webpack v4.8.3
“`

以下の手順＋αです。

> * [webpack と Babel – React入門 – to-R Media](https://www.to-r.net/media/react-tutorial11/)
> * [DriftwoodJP/sandbox-react at 9749dcaebc01618fa218b554fbf893421f15bd31](https://github.com/DriftwoodJP/sandbox-react/tree/9749dcaebc01618fa218b554fbf893421f15bd31)

## 導入手順

webpack + babel + flow と react をインストールします。

“`prettyprinted
% npm install –save-dev webpack webpack-cli babel-loader babel-core babel-preset-react babel-preset-env flow-bin babel-preset-flow
% npm install –save react react-dom
“`

`package.json` を追加します。

“`json:package.json
“scripts”: {
“flow”: “flow”,
“build”: “webpack -d”,
“start”: “webpack -d -w”,
“release”: “webpack -p”
},
“`

`.babelrc` を追加します。

“`prettyprinted:.babelrc
{
“presets”: [“env”,”flow”,”react”]
}
“`

`webpack.config.js` を追加します。

“`javascript:webpack.config.js
const path = require(“path”);
module.exports = {
entry: “./src/app.js”,
output: {
filename: “app.js”,
path: path.resolve(__dirname, “dist”)
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: “babel-loader”
}
]
}
};
“`

## 補遺

> * [webpackでJavaScriptライブラリを利用する – to-R](http://blog.webcreativepark.net/2016/11/25-134312.html)

[/markdown]