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 -y3. 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 -D4. 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を作成、以下を記入：
constpath=require('path');constHtmlWebpackPlugin=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:[newHtmlWebpackPlugin({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><htmllang="en"><head><metacharset="utf-8"><title>Hi There</title></head><body><divid="root"></div><script src="bundle.js"></script></body></html>index.js:
importReactfrom"react";importReactDOMfrom"react-dom";import"./style/main.less";classWelcomeextendsReact.Component{render(){return<h1>HelloWorld!</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 が表示されるはず。