[React]create-react-appを使わずに環境構築 ~設定ファイル編~

はじめに

この記事では、以前書いた[React][mac]create-react-appを使わずに環境構築で作成した設定ファイルの記述について、簡単に説明していきます。

.babelrc

// Babelに関する設定
{
 // Presentsというプラグインのプリセット
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

.eslintrc.json

.eslintrc.json

{
  "parser": "babel-eslint",
  // ESLintがされる環境の指定 
  "env": {
    // ブラウザーでES6を使用する
    "browser": true,
    "es6": true
  },
  // パーサーの設定
  "parserOptions": {
    // ES6のmodulesを使用する
    "sourceType": "module",
    // JS言語の追加機能の指定
    "ecmaFeatures": {
      // 分割代入を有効にする
      "experimentalObjectRestSpread": true,
      // JSXを有効にする
      "jsx": true
    }
  },
  // ルールのデフォルトを指定
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  // React用のプラグインを指定
  "plugins": ["react"],
  // ルールの設定（ルールのデフォルトと違う設定や、デフォルトにない項目を追加などをする）
  "rules": {
    // console.logを使えるようにする
    "no-console": "off"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

webpack.config.js

webpack.config.js

module.exports = {
  // アプリ起動時に動作すべきJSのソースファイルを指定(複数のファイルを指定可能)
  entry: {
    app: "./src/index.js"
  },
  // 出力されるファイル名、パスを指定
  output: {
    // 絶対パスで指定する必要があるためカレントディレクトリを表す __dirname と連結している
    path: __dirname + '/public/js',
    // [name] と書くと上記 entry で付けたキー(app)が使われる
    filename: "[name].js"
  },
    // webpack-dev-serverの設定
    devServer: {
    // webで公開するディレクトリー(index.htmlがある)のパス
    contentBase: __dirname + '/public',
    // 開発サーバーが使用するポート番号
    port: 8080,
    // webpackが出力するJSのあるディレクトリーが contentBase と異なる場合に指定
    publicPath: '/js/'
  },
  // デバックできるようにmapファイルを作成する指示
  devtool: "eval-source-map",
  mode: 'development',
  // ファイルの種類ごとにloaderを指定
  // test: に書かれている正規表現とマッチする場合、そのオブジェクトに書かれた loader が動く
  module: {
    rules: [{
      // ESLint の loader　を実行
      test: /\.js$/,
      enforce: "pre",
      exclude: /node_modules/,
      loader: "eslint-loader"
    }, {
      // css-loader , style-loader を実行
      test: /\.css$/,
      loader: ["style-loader","css-loader"]
    }, {
      // Babel の loader を実行
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
     }]
  }
};

おわり

最後まで見て頂き、ありがとうございました。