Reactプロジェクト環境の構築メモ #Node.js

freeCodeCamp の How to set up & deploy your React app from scratch using Webpack and Babel より、余計なパッケージ等が多く付属されてしまう create-react-app とは別の方法でのセットアップだそうだ。

nvm で node と npm のインストール
プロジェクトの初期化
npm パッケージのインストール
package.json の設定
webpack.config.js の設定
rc ファイルの設定
サイトのコンテンツの作成
サーバー起動

1. nvm で node と npm をインストール

$ sudo wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
$ exec bash
$ nvm --version
0.35.2
$ nvm install node
$ node -v
v13.5.0
$ npm -v
6.13.4

2. プロジェクトの初期化

$ mkdir my-react-project && cd my-react-project
$ npm init -y

3. npm パッケージのインストール

React, Webpack, Babel, ESlint, Less, Prettier パッケージをインストール:

$ npm install --save-dev \
react react-dom \
webpack webpack-dev-server webpack-cli \
@babel/core @babel/preset-env @babel/preset-react babel-loader \
eslint eslint-loader babel-eslint eslint-config-react eslint-plugin-react \
less less-loader css-loader style-loader 
$ npm install --save-dev --save-exact prettier
$ npm install html-webpack-plugin -D

4. package.json の設定

package.json 内の "scripts"に以下の様に追加

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1", 
  "start": "webpack-dev-server --mode development", 
  "format": "prettier --write \"src/**/*.js\"",
  "eslint-fix": "eslint --fix \"src/**/*.js\"",
  "build": "webpack --mode production"
}

5. webpack.config.js の設定

webpack.config.jsを作成、以下を記入：

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

module.exports = {
  devtool: 'inline-source-map',
  entry: './src/index.js',
  output: {
    path: __dirname + '/build',
    publicPath: './',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './build',
    port: 4000,
    writeToDisk: true,
    historyApiFallback: true,
    publicPath: './'
  },
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader', 'eslint-loader']
    },
    {
      test: /\.less$/,
      use: [
        'style-loader',
        'css-loader',
        'less-loader',
        ]
    }]},
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve('./index.html'),
    }),
  ]};

6. rc ファイルの設定

.babelrc:

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

.eslintrc:

{
  "parser": "babel-eslint",
  "extends": "react",
  "env": {
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

.prettierrc:

{"semi": true, "singleQuote": true, "trailingComma": "es5"}

7. サイトのコンテンツの作成

以下ファイルとディレクトリを作る：

index.html
/src
/src/index.js
/src/style/
/src/style/main.less
/src/style/header.less

内容は以下の通りに：

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hi There</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

index.js:

import React from "react";
import ReactDOM from "react-dom";
import "./style/main.less";

class Welcome extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
};
ReactDOM.render(<Welcome />, document.getElementById("root"));

main.less:

@import "header.less";
@color: #f5adad;
body {
  background-color: @color;
}

header.less:

.header {
  background-color: #3d3d;
}

8. サーバー起動

Prettier と ESLint でコードを整形:

$ npm run format
$ npm run eslint-fix

サーバー起動:

$ npm run start

コンパイルが成功したら http://localhost:4000/ に Hello World が表示されるはず。