无需重建和重新启动即可响应更改文件

Question

我创建了一个基于 node.js express 和 react 的小项目。

我的项目结构很简单

我运行 node 作为服务器和所有反应代码 winthinclient文件夹。

我的节点package.json如下所示：

"scripts": {
    "start": "concurrently \"npm run server\" \"npm run client\"",
    "server": "node ./bin/www",
    "client": "node start-client.js",
    "lint:client": "(cd ./client && npm run lint)",
    "lint:app": "eslint . --ext .js,.jsx --ignore-pattern 'client/*'",
    "lint": "npm run lint:client && npm run lint:app",
    "dev:client": "(cd ./client && npm start)",
    "dev:app": "nodemon ./bin/www",
    "build": "(cd ./client && npm run build)",
    "test:client": "(cd ./client && CI=true npm test)",
    "test:app": "jest --forceExit",
    "test": "npm run test:client && npm run test:app",
    "coverage:client": "cd ./client && npm test -- --coverage",
    "coverage:app": "jest --coverage",
    "coverage": "npm run coverage:client && npm run coverage:app",
    "install": "(cd ./client && npm install --quiet)"
  },

并package.json在客户端看起来像如下：

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "lint:scss": "stylelint 'src/**/*.scss' --syntax scss",
    "lint:scss:fix": "stylefmt --recursive 'src/**/*.scss'",
    "lint:js": "eslint . --ignore-path .gitignore --ext .js,.jsx",
    "lint:js:fix": "npm run lint:js -- --fix",
    "lint": "npm run lint:js && npm run lint:scss",
    "eject": "react-scripts eject"
  }

我npm start在根文件夹中运行以启动 node.js 和 react build。

我的问题是我需要npm start在更改任何反应代码时重新运行。

所以，我的问题是有什么办法可以观察我的代码更改，而无需在文件更改时重新启动？

Answer 1

如果您询问如何编辑代码并实时重新加载，我建议使用nodemon. 查看 github 页面： https: //github.com/remy/nodemon。

我有一个类似的项目，我通过concurrently在package.json脚本中使用来处理实时重新加载：

"scripts": {
        "serve": "nodemon index.js",
        "client": "npm run start --prefix client",
        "dev": "concurrently \"npm run serve\" \"npm run client\""
    }

指--prefix client的是我的反应目录的名称。该client脚本运行我的反应服务器的基本部分npm run start，而该dev脚本同时运行该服务器和我的后端。