0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

React開発環境を作る2

Last updated at Posted at 2020-03-21

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を動かしてみます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?