Node.js 实时刷新：两步解决应用重启难题

2023-09-05 17:55:30

在 Node.js 开发中，每次对代码进行修改和调试后都需要重启应用，这会浪费大量时间和精力。本文将介绍两种简单的方法，让你轻松实现 Node 应用的实时刷新，告别重启困扰！

步骤 1：使用 Nodemon

Nodemon 是一个监视文件更改并在检测到更改时自动重启 Node.js 应用的工具。安装 Nodemon 后，只需在命令行中运行以下命令即可启动实时刷新：

npx nodemon index.js

步骤 2：热模块替换

热模块替换 (HMR) 是一个强大的技术，它允许在不重新加载整个应用的情况下替换单个模块。这对于 React 和其他前端框架尤为有用。

要使用 HMR，需要安装 webpack-dev-server 和 webpack，并修改 webpack 配置文件以启用 HMR：

const webpack = require('webpack');
const devServer = require('webpack-dev-server');

const config = {
  // ... 其他 webpack 配置
  devServer: {
    hot: true,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
};

// ... 创建并启动 webpack-dev-server

实例说明

实例 1：Express 应用

对于 Express 应用，可以在 app.js 文件中引入 nodemon 并启动实时刷新：

const express = require('express');
const nodemon = require('nodemon');

const app = express();

// 其他 Express 配置

app.listen(3000, () => {
  console.log('Server listening on port 3000');
  // 启动 Nodemon 实时刷新
  nodemon({
    script: 'app.js',
    ext: 'js json',
  });
});

实例 2：React 应用

对于 React 应用，可以在 webpack.config.js 文件中启用 HMR：

const webpack = require('webpack');
const devServer = require('webpack-dev-server');

module.exports = {
  // ... 其他 webpack 配置
  devServer: {
    hot: true,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
};