代码之家  ›  专栏  ›  技术社区  ›  wandermonk

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

npm-scripts npm reactjs
  •  0
  • wandermonk  · 技术社区  · 6 年前

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

    我正在使用visualstudio代码,问题是如何在dev模式下启动项目并查看代码的工作方式。

    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
    1 回复  |  直到 6 年前
        1
  •  0
  •   aarkerio    6 年前

    你需要这样的东西: 

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

    在你的包.json文件。然后: 

     $npm run dev:hot

    这些是我的文件,让您了解如何在dev/hot模式下使用webpack:

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

    顺便说一句,如果你安装Linux,一切都会变得简单。

    推荐文章
    Daniel Aloyce Daniel.  ·  如何在后端使用它(Node Js)
    2 年前
    Glynn Smith  ·  通过包将视觉样式应用于npm脚本中使用的echo命令。json
    6 年前
    Sanyasirao Mopada  ·  如何在react native中检测循环依赖项导入?
    7 年前
    Rodney  ·  如何在Ionic2构建脚本中运行copy命令
    7 年前
    NiHao92  ·  如何将脚本库“永久安装”到web中?
    7 年前
    Tyler  ·  在windows上运行并行npm脚本
    7 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号