每次更改代码以查看效果后，我都必须运行"npm run-script build“

Question

我有一个包含Expressjs和Reactjs的Nodejs项目。我更改了代码并重新加载，或npm start，但这并没有加载我所做的更改。要查看我的更改，我每次都必须运行npm run-script build。在任何代码更改后，我如何运行它？

这是我的pacakge.json文件部分

"scripts": {
    "start": "node ./bin/start",
    "build": "./node_modules/.bin/webpack",
    "dev-client": "./node_modules/.bin/webpack-dev-server --port 3002 --content-base public/",
    "fullStart": "./node_modules/.bin/webpack && node ./bin/start",
    "debug": "node $NODE_DEBUG_OPTION ./bin/start",
    "test": "jest"
  },

Answer 1

处理此问题的最常见方法是：

使用以下命令安装nodemon包：

npm install nodemon --save-dev

在您的package.json中使用以下命令：

"scripts": {
    "start": "nodemon ./bin/server.js" // your application start file
}

当您保存项目时，它将加载您的新更改。

Answer 2

要将应用程序配置为在文件更改时自动刷新/重新加载，最流行的方法之一是使用livereload。

为了安装和启用 ，请运行以下命令

1. 全局安装livereload

npm install -g livereload

• Enable livereload (首先将路径替换为源代码的目录路径)

livereload [path]

如果项目最初是通过流行的生成器(例如Create React App)创建的，则此功能很可能已经可用。请参阅生成器文档进行确认。

Answer 3

我只是遇到了一个问题，我试图用npm start而不是npm run dev来启动我的应用程序。在我的例子中，我没有使用nodemon，但我认为在某些情况下，如果你已经安装了像nodemon这样的包，这可能会有所帮助。

在我的例子中，它是stripe.js代码库的克隆。next用于类似的nodemon类型功能。

  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "watch": "watch 'npm run build' ./demo-react-stripe-js-master"
  },

当我尝试使用npm start时，我必须一遍又一遍地刷新页面才能看到变化。在使用npm run dev之后，它似乎可以通过适当的热重新加载来执行。