RailsでReact.jsを使う時のミニマムの設定

RailsでReact.jsを使う時に使用するミニマムの設定を紹介します。

構成

• Railsのプロジェクト直下にfrontというディレクトリを用意する
• webpackでコンパイルした際に/assets/javascripts/webpack以下にエントリファイル毎に吐き出されるようにする

ライブラリのインストール

開発環境のみ入れるもの

# webpack
$ npm install -D webpack webpack-cli

# babel
$ npm install -D @babel/core @babel/preset-env @babel/preset-react 

# sass
$ npm install -D node-sass 

# loader
$ npm install -D babel-loader sass-loader css-loader file-loader style-loader url-loader 

本番環境で使用するもの

$ npm install react react-dom

webpackの設定

webpack.config.js

const path = require('path');

module.exports = [
  {
    entry: {
      'messageEdit': './src/javascripts/entries/articles/edit.js'
    },
    output: {
      path: path.resolve(__dirname, '../app/assets/javascripts/webpack'),
      filename: "[name].js"
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/react']
            }
          }
        },
        {
          test: /\.(css|scss)$/,
          use: ['style-loader', 'css-loader?modules', 'sass-loader']
        },
        {
          test: /\.(png|jpg|svg)$/,
          loader: 'url-loader'
        }
      ]
    },
    resolve: {
      extensions: ['.js', '.css', '.scss']
    }
  }
]

package.json

以下の内容を追記する。

"scripts": {
    "watch": "webpack -w --mode development",
    "build": "webpack --mode production"
}