更改旧的 React 应用程序以使用 React Dev Tools

Question

我是 React 应用程序的新手，如果我的问题有一个简单的答案，请原谅。我在 Google 度过了最后几天，但没有找到解决我的问题的方法。

在我的新职位上，我被要求修改当前的 React 应用程序。缺点是这个应用程序是在我的时代之前构建的并且很旧。该应用程序不允许进行开发构建。由于它不允许开发构建，我们的开发团队无法看到组件布局、道具或状态以及 React 开发工具提供的任何其他好东西。

我的问题是如何让我的应用程序与 React Dev Tools 一起正常工作？

其他可能有帮助的详细信息：文件位于 ABC/app/src/common 通常在我的雇主这里，这将转化为 URL 的： www.ABC.com/app/。然而出于某种原因，事情并不是这样设置的。

相反，该应用程序是从 URL 子域提供的： app.XYZ.com 另外，请注意 URL www.XYZ.com 不是 React 应用程序 -（不确定这是否相关）

基本上构建脚本会创建包，并且 .min 文件会从 ABC/app/src/common 文件夹移动到 app.XYZ/。

package.JSON:

  "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"
    ]
  }
}

Answer 1

在根项目文件夹中尝试运行 react-scripts start。

应用程序应在 http://localhost:3000 打开一个新浏览器 window - 然后如果您安装了 React DevTools Chrome 扩展，您应该能够访问 React DevTools 选项卡

Answer 2

经过一些调查并感谢@JonathanIrwin 和@DrewReese，我注意到在 package.json 文件中，scripts 子对象内有 scripts.start。这会覆盖默认的启动命令。因此，当执行命令 npm start 或 yarn run start 时，节点是运行ning 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。

更改旧的 React 应用程序以使用 React Dev Tools

Change old React app to work with React Dev Tools

build

reactjs

react-router

redux

react-devtools