create-react-appに頼らずにReact環境構築

webpack + babelでの開発環境に加えて、eslint + prettierの設定まで。

パッケージのインストール

react + react-dom

npm install react react-dom

ちなみにreact-domはreactをDOM向けにコンパイルするパッケージで、 DOM以外の環境などにコンパイルする際には別のパッケージなどを使う。 例えば、スマホアプリ向けにはreact-nativeを使う。

webpack + babel

webpackで必要なloaderとpluginも最低限に追加する。

loader

babel-loader, style-loader, css-loader

plugin

html-webpack-plugin

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin

eslint + prettier

最近よく使っているWes Bosのセットアップ github.com

こちらのGithubリポジトリに書いてある通りにセッティングを進める。

ESLintのルールをオーバーライドする場合は.eslintrcにオーバーライドするルールを加える。

.eslintrc

{
  "extends": [
    "wesbos"
  ],
  "rules": {
    "no-console": 2,
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "es5",
        "singleQuote": true,
        "printWidth": 120,
        "tabWidth": 8,
      }
    ]
  }
}

.eslintignore

Webpackを通した後に生成されたdist/フォルダ内などはlint対象ではないので、 .eslintignoreを作成して指定しておく。

dist/

ディレクトリ構造

.
├── package-lock.json
├── package.json
├── src
│   ├── index.css
│   ├── index.html
│   └── index.js
└── webpack.config.js

webpack.config.jsの設定

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js)$/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
    }),
  ],
};

これで最低限のReact開発環境が出来上がる。

エントリーポイントである./src/index.jsを通じてバンドルを行い、index.htmlの方にアウトプットする。

Webpackの各loaderによって、下から順番に（配列の場合後ろから前に）処理が進む。 まずcss-loaderによってエントリーポイントでimportされたcssがバンドルされ、次にstyle-loaderでlinkタグへの展開が行われる。

最後にbabel-loaderを通すことによって、ブラウザが認識可能なjsにコンパイルが行われる。 もちろん、ここではReact向けのbabelの設定を用意しておかなければならない。

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

pluginsに記述したhtml-webpack-pluginにより、 htmlファイルにエントリーポイントのJSファイルの読み込み記述が追加され、 htmlファイルも一緒にdist/にコピーされる。

package.jsonに必要なnpm scriptsを追記しておく。

{
  "name": "hoge",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "clean": "rimraf dist/"
  }
}

これでReactのwebpack-dev-serverによるHot module replacementと webpackによるコンパイル・バンドル環境が整った。