如何在开发模式下启动React / Redux应用程序？

Question

我是前端开发的绝对新手。我得到了一个使用ReactJS和Redux的项目。

我正在使用Visual Studio Code，问题是如何在开发模式下启动项目并查看代码的工作原理。

我试过npm run。我看到了以下内容。如何在开发模式下运行项目并进行调试。请帮忙。

npm run
Scripts available in idealreactseed via `npm run-script`:
  run:dev
    better-npm-run run:dev
  run:dev:windows
    better-npm-run run:dev:windows
  run:local:dev
    better-npm-run run:local:dev
  run:host:dev
    better-npm-run run:host:dev
  build:dist
    better-npm-run build:dist

我在package.json中有这些脚本。

"scripts": {
    "run:dev": "better-npm-run run:dev",
    "run:dev:windows": "better-npm-run run:dev:windows",
    "run:local:dev": "better-npm-run run:local:dev",
    "run:host:dev": "better-npm-run run:host:dev",
    "build:dist": "better-npm-run build:dist"
  },
  "betterScripts": {
    "run:host:dev": {
      "command": "./node_modules/.bin/webpack-dev-server --config ./webpack/webpack.dev.config.js --host 0.0.0.0",
      "env": {
        "NODE_ENV": "development",
        "API_HOST": "http://104.236.17.8",
        "API_PORT": 5000
      }
    },
    "run:local:dev": {
      "command": "./node_modules/.bin/webpack-dev-server --config ./webpack/webpack.dev.config.js",
      "env": {
        "NODE_ENV": "development",
        "API_HOST": "http://127.0.0.1",
        "API_PORT": 5000
      }
    },
    "run:dev": {
      "command": "./node_modules/.bin/webpack-dev-server --config ./webpack/webpack.dev.config.js",
      "env": {
        "NODE_ENV": "development",
        "API_HOST": "http://104.236.17.8",
        "API_PORT": 5000
      }
    },
    "run:dev:windows": {
      "command": ".\\node_modules\\.bin\\webpack-dev-server --config .\\webpack\\webpack.dev.config.js",
      "env": {
        "NODE_ENV": "development",
        "API_HOST": "http://104.236.17.8",
        "API_PORT": 5000
      }
    }

这是项目结构。感谢您的帮助。

C:.│   .gitignore
│   autoMerge.sh
│   deploy.sh
│   index.html│   index.js
│   package-lock.json│   package.json
│   README.md
│   routes.js
│   store.js│
├───assets
│   └───images
│           dummy.jpg
│           favicon-32x32.png
│           favicon.ico
│           logosmall.png
│           logowithouttitle-cropped.png
│           logowithouttitle.png
│
├───src
│   ├───api
│   │       article.js
│   │       auth.js
│   │       comments.js
│   │       upload.js
│   │       user.js
│   │
│   ├───components
│   │       ArticleTile.js
│   │       FacebookSocialLoginButton.js
│   │       GoogleSocialLoginButton.js
│   │       Header.js
│   │       index.js
│   │       InputPreview.js
│   │       ListExampleSelectable.js
│   │       LoadingButton.js
│   │       Logo.js
│   │       Notification.js
│   │       UserProfileHeader.js
│   │
│   ├───constants
│   │       index.js
│   │
│   ├───containers
│   │       About.js
│   │       AccountSettings.js
│   │       App.js
│   │       ArticleDetail.js
│   │       Author.js
│   │       ForgotPassword.js
│   │       Home.js
│   │       index.js
│   │       Login.js
│   │       NewStory.js
│   │       ResetPassword.js
│   │       ScrollToTop.js
│   │       SearchContainer.js
│   │       Signup.js
│   │       VerifyEmail.js
│   │
│   ├───redux
│   │   ├───actions
│   │   │   │   article.js
│   │   │   │   auth.js
│   │   │   │   comments.js
│   │   │   │   index.js
│   │   │   │   message.js
│   │   │   │   upload.js
│   │   │   │   user.js
│   │   │   │
│   │   │   └───actionTypes
│   │   │           article.js
│   │   │           auth.js
│   │   │           comments.js
│   │   │           common.js
│   │   │           index.js
│   │   │           message.js
│   │   │           user.js
│   │   │
│   │   ├───reducers
│   │   │       article.js
│   │   │       auth.js
│   │   │       comments.js
│   │   │       index.js
│   │   │       message.js
│   │   │       user.js
│   │   │
│   │   └───types
│   │           message.js
│   │
│   └───utils
│           index.js
│
├───style
│       articlePage.less
│       breakPoints.less
│       common.less
│       home.less
│       index.less
│       login.less
│       mixins.less
│       settings.less
│       signup.less
│       variables.less
│
└───webpack
        webpack.common.config.js
        webpack.dev.config.js
        webpack.prod.config.js

Answer 1

你需要这样的东西：

"scripts": {
   "dev:hot": "webpack-dev-server -d --config 
   ./webpack.devel.config.js --hot --inline --progress --colors" 
   }

在你的package.json文件中。然后：

 $npm run dev:hot

这些是我的文件，为了让您了解如何在开发/热模式下使用webpack：

https://github.com/aarkerio/schnellentest/tree/master/lib/frontend/react

顺便说一句，如果你安装Linux，一切都会更容易。