快速迭代：利用 nodemon 和其他工具实现 Express.js 热更新

news2025/3/17 6:05:03

在开发 Express.js 应用时，热更新（Hot Reloading）可以显著提升开发效率，因为它允许你在修改代码后立即看到效果，而无需手动重启服务器。以下是几种实现热更新的方法和工具，帮助你在开发过程中更高效地工作。

一、使用 `nodemon`

nodemon 是一个非常流行的工具，用于监控 Node.js 应用程序中的文件变化，并在检测到变化时自动重启服务器。这是最简单且广泛使用的热更新方法之一。

安装 `nodemon`

首先，你需要安装 nodemon：

npm install --save-dev nodemon

配置 `nodemon`

你可以通过多种方式配置 nodemon，最常见的方法是将其添加到 package.json 的 scripts 部分：

{
  "scripts": {
    "start": "node app.js",
    "dev": "nodemon app.js"
  }
}

然后，你可以通过以下命令启动开发服务器：

npm run dev

nodemon 将会监控你的文件变化并自动重启服务器。

自定义 `nodemon` 配置

你还可以创建一个 nodemon.json 文件来定制 nodemon 的行为：

{
  "watch": ["src"],  // 监控的目录或文件
  "ext": "js,json", // 监控的文件扩展名
  "ignore": ["node_modules", "logs"]  // 忽略的目录或文件
}

二、使用 `ts-node-dev`（适用于 TypeScript）

如果你使用 TypeScript 开发 Express.js 应用，ts-node-dev 是一个非常好的选择。它结合了 ts-node 和 nodemon 的功能，可以在修改 .ts 文件时自动重新编译并重启服务器。

安装 `ts-node-dev`

首先，确保你已经安装了 typescript 和 ts-node：

npm install --save-dev typescript ts-node

然后安装 ts-node-dev：

npm install --save-dev ts-node-dev

配置 `ts-node-dev`

在 package.json 中添加脚本：

{
  "scripts": {
    "start": "node dist/app.js",
    "dev": "ts-node-dev --respawn --transpile-only src/app.ts"
  }
}

--respawn：当文件发生变化时，强制重启进程。
--transpile-only：仅进行转译而不进行类型检查，加快编译速度。

然后运行：

npm run dev

三、使用 `webpack` 和 `webpack-dev-middleware`

对于更复杂的项目，特别是那些需要前端构建工具的情况，你可以使用 webpack 结合 webpack-dev-middleware 来实现热更新。

安装依赖

首先，安装所需的依赖：

npm install --save-dev webpack webpack-cli webpack-dev-middleware webpack-hot-middleware

配置 `webpack`

创建一个 webpack.config.js 文件：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    './src/index.js'
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  devtool: 'inline-source-map'
};

在 `Express` 中集成 `webpack-dev-middleware`

修改你的 app.js 文件以集成 webpack-dev-middleware：

const express = require('express');
const webpack = require('webpack');
const webpackConfig = require('./webpack.config');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');

const app = express();
const compiler = webpack(webpackConfig);

app.use(webpackDevMiddleware(compiler, {
  publicPath: webpackConfig.output.publicPath
}));

app.use(webpackHotMiddleware(compiler));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

四、使用 `concurrently` 并行运行多个任务

有时你可能需要同时运行多个任务，例如前端和后端的热更新。concurrently 可以帮助你并行运行这些任务。

安装 `concurrently`

npm install --save-dev concurrently

配置 `package.json`

在 package.json 中添加一个新的脚本：

{
  "scripts": {
    "start": "node app.js",
    "client": "webpack serve --config webpack.client.js",
    "server": "nodemon app.js",
    "dev": "concurrently \"npm run client\" \"npm run server\""
  }
}