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

公開日: 2018/05/18
更新日: 2018/09/26

続きに相当する記事。

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

以下の手順＋αです。

導入手順

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

% 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 を追加します。

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

.babelrc を追加します。

.babelrc
{
  "presets": ["env","flow","react"]
}

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

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"
      }
    ]
  }
};

補遺