无法运行反应js项目

Posted 2023-02-21

【中文标题】无法运行反应js项目

【英文标题】：Unable to run react js project

【发布时间】：2017-09-30 23:22:35

【问题描述】：

我有一个使用 react js 构建的项目 我想在本地执行它

到目前为止我做了什么：

1) 安装 node.js（windows 64 位）

2) 从https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm 一直到第 3 步

现在我有

1) c://程序文件/nodejs/node_modules

2) 桌面/reactApp/node_modules

我将我的项目文件夹放在 reactApp/ 中。所以 package.json 在 reactApp/package.json

现在当我尝试运行npm start

C:\Users\xxx\Desktop\reactApp>npm start

> liquid@0.1.0 start C:\Users\jitendra\Desktop\reactApp
> PORT=8080 react-scripts start

'PORT' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! liquid@0.1.0 start: `PORT=8080 react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the liquid@0.1.0 start script 'PORT=8080 react-scripts start'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the liquid package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     PORT=8080 react-scripts start
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs liquid
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls liquid
npm ERR! There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\jitendra\AppData\Roaming\npm-cache\_logs\2017-05-03T08_13_40_048Z-debug.log

这是我的 package.json 文件

  "name": "liquid",
  "version": "0.1.0",
  "private": true,
  "devDependencies": ,
  "dependencies": 
    "bootstrap": "^4.0.0-alpha.6",
    "chart.js": "^2.5.0",
    "google-map-react": "^0.23.0",
    "lodash": "^4.17.2",
    "moment": "^2.18.1",
    "prop-types": "^15.5.8",
    "react": "^15.5.4",
    "react-chartjs-2": "^2.0.5",
    "react-dom": "^15.5.4",
    "react-redux": "^5.0.1",
    "react-router": "^2.8.1",
    "react-router-redux": "^4.0.5",
    "react-scripts": "^0.9.5",
    "react-sortable-tree": "^0.1.17",
    "react-table": "^5.5.3",
    "reactstrap": "^4.3.0",
    "redux": "^3.6.0",
    "redux-logger": "^2.7.4",
    "redux-thunk": "^2.1.0",
    "whatwg-fetch": "^2.0.1"
  ,
  "scripts": 
    "start": "PORT=8080 react-scripts start",
    "build": "react-scripts build && aws s3 sync build/ s3://xxx.co/1micro",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  ,
  "homepage": "http://xxx.co/1micro"

【问题讨论】：

运行管理员命令提示符，转到项目文件夹的根目录并运行npm install，有时这会修复一些依赖项问题

How to specify a port to run a create-react-app based project?的可能重复

@MayankShukla，El Ruso 的回答与我的 json 文件相同。和错误显示在同一行。可能它在 Windows 上不起作用。

您显然使用了一个不属于您的项目的 package.json，如果您确实按照指南进行操作，您就是说您不会有那些额外的依赖项。好像你混合了两个项目。请提供您正在尝试启动的项目的链接

react-scripts 与使用 create-react-app 创建的项目相对应，如果您自己创建一个，您也应该按照链接中的其余步骤操作，即配置网页包

【参考方案1】：

在您的项目根目录创建一个.env 文件并在那里指定端口号PORT=3005 然后在包 json 启动脚本中像这样使用"start": "react-scripts start"

下面的示例包json文件

  "name": "r",
  "version": "0.1.0",
  "private": true,
  "devDependencies": 
    "react-scripts": "0.8.4"
  ,
  "dependencies": 
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  

【讨论】：

它说，'react-scripts' 不被识别为内部或外部命令，

希望你先执行npm install 来获取你机器上的依赖项

是的，我在 node_modules 文件夹中有 react 和 react-dom 文件夹。当我尝试 npm ls react-scripts 时，它说 `-- UNMET DEPENDENCY react-scripts@^0.9.5 npm ERR！缺少：react-scripts@^0.9.5，liquid@0.1.0 需要

@NiraliJoshi 你能把react-scripts 放入dev dependencies 而不是dependencies 并再次尝试npm install

@NiraliJoshi 我添加了一个示例 packagejson，这会有所帮助

【参考方案2】：

那个 PORT 命令只能在 Unix 上工作。尝试打开命令窗口并以windows方式设置端口变量，我认为它是（在powershell中）：

$env:PORT=3005

或者，在普通的命令窗口中：

set PORT=3005

然后您可以通过运行来检查其工作情况：

echo %PORT%

应该返回 3005。然后，导航到您的 reactApp 目录并运行：

react-scripts start

【讨论】：

我应该在我的项目根目录运行 $env:PORT=3005 吗？

它说，文件名、目录名或卷标语法不正确。

@NiraliJoshi 在 Windows Powershell 上运行它 $env:PORT=3005

更新了我的答案。运行 PORT 等设置的环境参数时，您在哪里并不重要

@Wayneio 在你没有提到可以在 cmd 中使用的 set 命令之前，但是你提到了$env:PORT=3005 却没有确切地告诉在哪里执行这是问题所以提到了它