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