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 が表示されるはず。