Как дебажить код ReactJS в ConsoleDevTools

После долгих мучений с parcel, я не смог создать возможность увидеть исходных, код (не минимизированный) в консоли хрома для дебага. Поэтому я воспользовался другим сборщиком - webpack.

Настраиваем конфиг webpack в директории

Исходники js-a были за пределами настроенной директории веб сервера, возможно это повлияло на то, что я не смог настроить отображение исходного кода в консоил, используя сборщик parcel.

Конфиг webpack (webpack.config.js) был следующим:

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, "/../public/js"),
        filename: 'app.min.js',
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.js$|jsx/,
                use: 'babel-loader',
                exclude: [
                    /node_modules/
                ]
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
        ],

    },
    resolve:
        {
            alias: {
                ui: path.resolve(__dirname, './src/ui'),
                capsules: path.resolve(__dirname, './src/modules/capsules'),
                exporter: path.resolve(__dirname, './src/modules/attribute-exporter'),
                'price-parser': path.resolve(__dirname, './src/modules/price-parser')
            },
        }
};

Super-powers are granted randomly so please submit an issue if you're not happy with yours.

Настраиваем конфиг package.json:

{
  "name": "js",
  "version": "1.0.0",
  "dependencies": {
    "@trendmicro/react-sidenav": "^0.4.5",
    "lodash": "^4.17.15",
    "parcel": "^1.12.4",
    "react": "^16.8.6",
    "react-custom-scrollbars": "^4.2.1",
    "react-dom": "^16.8.6",
    "react-modal": "^3.8.2",
    "react-modal-image": "^2.4.0",
    "react-rangeslider": "^2.2.0",
    "react-tooltip": "^3.10.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/plugin-transform-react-jsx-source": "^7.5.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "parcel-bundler": "^1.12.4",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9"
  },
  "babel": {
    "presets": [
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
  },
  "scripts": {
    "dev": "parcel watch src/app.js --out-dir=../public/js --out-file=app.min.js",
    "build": "parcel build src/app.js --out-dir=../public/js --out-file=app.min.js",
    "debug": "webpack --watch"
  },
  "alias": {
    "ui": "./src/ui",
    "exporter": "./src/modules/attribute-exporter",
    "capsules": "./src/modules/capsules",
    "price-parser": "./src/modules/price-parser"
  }
}

Запускаем команду

npm install

Если в parcel алиасы компонентов указываются в package.json, то их нужно переписать в webpack.config.js

"alias": {
    "ui": "./src/ui",
    "exporter": "./src/modules/attribute-exporter",
    "capsules": "./src/modules/capsules",
    "price-parser": "./src/modules/price-parser"
  }