我是 React 应用程序的新手，所以如果我的问题有一个简单的答案，请原谅我。我最近几天一直在谷歌上，但没有找到我的问题的解决方案。
在我的新职位上，我被要求修改当前的 React 应用程序。简而言之，这个应用程序是在我那个时代之前构建的，而且很旧。应用不允许开发版本。由于它不允许开发构建，我们的开发团队无法看到组件布局、道具或状态以及 React Dev 工具提供的任何其他好东西。
我的问题是如何让我的应用程序与 React 开发工具正常工作？
其他可能有帮助的详细信息： 文件位于ABC/app/src/common通常在我的雇主这里，这会转换为以下网址：www.ABC.com/app/.然而，出于某种原因，事情并不是这样设置的。
相反，应用是通过 URL 子域提供的：app.XYZ.com另外，请注意，URLwww.XYZ.com不是 React 应用程序 - (不确定这是否相关(
基本上，构建脚本创建捆绑包，.min文件从ABC/app/src/common文件夹移动到app.XYZ/。
包。杰森：
"name": "ABC-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.0-14",
"@fortawesome/free-solid-svg-icons": "^5.1.0-11",
"@fortawesome/react-fontawesome": "0.1.0-11",
"ajv": "^6.0.0",
"alertifyjs": "^1.11.2",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"connected-react-router": "^4.4.1",
"dateformat": "^3.0.3",
"deep-freeze": "0.0.1",
"fast-deep-equal": "^2.0.1",
"fuse.js": "^3.4.6",
"history": "^4.7.2",
"i": "^0.3.6",
"moment": "^2.22.2",
"node-sass-chokidar": "^1.3.3",
"npm": "^6.2.0",
"prop-types": "^15.6.2",
"react": "^16.5.0",
"react-collapse": "^4.0.3",
"react-dom": "^16.4.1",
"react-html-parser": "^2.0.2",
"react-loading": "^2.0.3",
"react-motion": "^0.5.2",
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"react-scripts": "^1.1.4",
"react-select": "^2.0.0",
"react-table-container": "^2.0.1",
"react-topbar-progress-indicator": "^2.0.0",
"react-transition-group": "^2.4.0",
"react-virtualized": "^9.20.1",
"redux": "^3.7.2",
"redux-thunk": "^2.3.0"
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "yarn run build-css && react-scripts build && yarn run move-js && yarn run move-css",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"commit": "react-scripts build && yarn run move-js && yarn run move-css",
"move-js": "cp ./build/static/js/main.*.js ../../app.XYZ.com/assets/js/main.js",
"move-css": "cp ./build/static/css/main.*.css ../../app.XYZ.com/assets/css/main.css"
},
"proxy": "http://dev-app.XYZ.com/",
"devDependencies": {
"eslint": "^5.7.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"redux-devtools": "^3.4.1",
"redux-logger": "^3.0.6",
"why-did-you-update": "^0.1.1"
},
"browserslist": {
"development": [
"last 2 chrome versions",
"last 2 firefox versions",
"last 2 edge versions"
],
"production": [
">0.25%",
"not op_mini all",
"ie 11"
]
}
}
尝试在根项目文件夹中运行react-scripts start。
应用程序应该在 http://localhost:3000 打开一个新的浏览器窗口 - 然后，如果您安装了React DevTools Chrome扩展，您应该能够访问React DevTools选项卡
经过一些调查，感谢@JonathanIrwin和@DrewReese，我注意到在package.json文件中，在scripts子对象内部有scripts.start。这将覆盖默认的启动命令。因此，当命令npm start或yarn run start被执行时，节点正在运行scripts.start其内容如下：
"start": "yarn run build-css && react-scripts build && yarn run move-js && yarn run move-css",
要解决此问题，请添加一个新脚本，内容如下：
"dev-start": "react-scripts start",
做这项工作。要执行此脚本，任何人都可以从终端yarn run dev-start或npm dev-start运行命令。