React開発環境を作る2

https://qiita.com/daga_0301/items/a7aa8bed488b13f5db64 の続き

まずはファイル構成から

│  .babelrc
│  .eslintrc.json
│  package-lock.json
│  package.json
│  webpack.config.js
│
├─public
│      index.html
│
└─src
        index.css
        index.js

webpack

webpackは今回使うツールの中で最上位のツール
javaScriptのモジュールやらcssやらを一つのファイルにまとめてくれます。
だから、htmlでこのようなことをしなくてよくなる。

<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./add.css">
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>

webpackはwebpack.config.jsファイルで設定をします。

module.exports = {
    entry: { //バンドルする元ファイルの場所を指定
        app : "./src/index.js" 
    },
    output: { //バンドルした成果物のファイル名と場所を指定
        filename: "bundle.js",
        path: __dirname + "/public"
    },
    devServer : {//サーバーを立ててwebpackを起動するときの設定
        historyApiFallback: true,
        contentBase : __dirname + '/public',
        port:8080,
        publicPath:'/'
    },
    devtool:"#inline-source-map",
    module:{ //モジュールの設定
        rules:[
            {
            test:/\.js$/, //.jsと付くファイルを対象にする
            enforce:"pre", //最初に実行することを指定
            exclude: /node_modules/, //node_modules/にあるファイルは除外
            loader:"eslint-loader" //eslint-loderを使う
        },
        {
            test:/\.css$/,　//.cssと付くファイルを対象にする
            loader:["style-loader","css-loader"]
        },{
            test:/\.js$/,
            exclude:/node_modules/,
            loader:'babel-loader'
        }]
    }
};

babel

babelはes6,es7で書いたjavascriptをes5に変換してくれます。
現在、javascriptはes6まで策定されていますが、ブラウザによってはes5しか対応していないものもあります。
import,class,letなどがes6になります。
この問題を解決してくれる素晴らしいツール、使わないわけにはいかない。
babelの設定ファイルは.babelrc
「.」から始まるファイルは設定によってはエクスプローラで表示されないので注意してください。

{
    "presets": ["env","react"]
}

eslint

eslintはタイプミスをチェックしたり、コードスタイルのルールを設定してくれます。
vsCodeにも組み込めるみたいなのでそっちで設定してもいいかも、
設定項目が馬鹿みたいに多いので動きさえすればいいのなら使わなくてもよい。
設定ファイルは.eslintrc.json

eslintrc.json

{
    "env":{
        "browser":true,
        "es6":true
    },
    "parserOptions":{
        "sourceType":"module",
        "ecmaFeatures":{
            "experimentalObjectResetSpread":true,
            "jsx": true
        }
    },
    "extends" : ["eslint:recommended","plugin:react/recommended"],
    "plugins" :["react"],
    "rules":{
        "no-console":"off"
    }
}

css-loader style-loader

css-loaderとstyle-loaderはwebpackでcssファイルをバンドルするときに必要
css-loaderはcssファイルを読み取って、style-loaderがstyleタグを出力するらしい（←よくわかってない
設定ファイルはありません。

終わり

今回はここまで
次はreactを動かしてみます。