热重载

对应用程序启动过程的最大影响是 TypeScript 编译。幸运的是，借助 webpack 的 HMR（热模块替换），我们不需要在每次发生更改时重新编译整个项目。这显著减少了实例化应用程序所需的时间，使迭代开发变得更加容易。

注意

请注意，webpack 不会自动复制你的资产（例如 graphql 文件）到 dist 文件夹。同样，webpack 不兼容全局静态路径（例如 TypeOrmModule 中的 entities 属性）。

使用 CLI

如果使用 Nest CLI，配置过程非常简单。CLI 封装了 webpack，允许使用 HotModuleReplacementPlugin。

安装

首先安装所需的包：

npm i --save-dev webpack-node-externals run-script-webpack-plugin webpack

备注

如果使用的是 Yarn Berry（而不是传统的 Yarn），请安装 webpack-pnp-externals 包，而不是 webpack-node-externals。

配置

安装完成后，在应用程序的根目录创建一个 webpack-hmr.config.js 文件。

const nodeExternals = require('webpack-node-externals');
const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');

module.exports = function (options, webpack) {
  return {
    ...options,
    entry: ['webpack/hot/poll?100', options.entry],
    externals: [
      nodeExternals({
        allowlist: ['webpack/hot/poll?100'],
      }),
    ],
    plugins: [
      ...options.plugins,
      new webpack.HotModuleReplacementPlugin(),
      new webpack.WatchIgnorePlugin({
        paths: [/\.js$/, /\.d\.ts$/],
      }),
      new RunScriptWebpackPlugin({ name: options.output.filename, autoRestart: false }),
    ],
  };
};

备注

使用 Yarn Berry（而不是传统的 Yarn）时，不要在 externals 配置属性中使用 nodeExternals，而是使用 webpack-pnp-externals 包中的 WebpackPnpExternals： WebpackPnpExternals({ exclude: ['webpack/hot/poll?100'] })。

此函数将原始对象（包含默认 webpack 配置的对象）作为第一个参数，将 Nest CLI 使用的底层 webpack 包的引用作为第二个参数。它返回一个带有 HotModuleReplacementPlugin、WatchIgnorePlugin 和 RunScriptWebpackPlugin 插件的修改过的 webpack 配置。

热模块替换

要启用 HMR，请打开应用程序入口文件（main.ts）并添加以下与 webpack 相关的指令：

declare const module: any;

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);

  if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => app.close());
  }
}
bootstrap();

为了简化执行过程，请在 package.json 文件中添加一个脚本。

"start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js --watch"

现在只需打开命令行并运行以下命令：

npm run start:dev

不使用 CLI

如果不使用 Nest CLI，则配置将稍微复杂一些（需要更多手动步骤）。

安装

首先安装所需的包：

npm i --save-dev webpack webpack-cli webpack-node-externals ts-loader run-script-webpack-plugin

备注

如果使用的是 Yarn Berry（而不是传统的 Yarn），请安装 webpack-pnp-externals 包，而不是 webpack-node-externals。

配置

安装完成后，在应用程序的根目录创建一个 webpack.config.js 文件。

const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');

module.exports = {
  entry: ['webpack/hot/poll?100', './src/main.ts'],
  target: 'node',
  externals: [
    nodeExternals({
      allowlist: ['webpack/hot/poll?100'],
    }),
  ],
  module: {
    rules: [
      {
        test: /.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  mode: 'development',
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new RunScriptWebpackPlugin({ name: 'server.js', autoRestart: false }),
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'server.js',
  },
};

备注

此配置告诉 webpack 有关应用程序的一些基本信息：入口文件的位置、应该用于保存编译文件的目录以及我们想要使用的编译源文件的加载器。通常情况下，即使你不完全了解所有选项，也应该能够直接使用这个文件。

热模块替换

要启用 HMR，请打开应用程序入口文件（main.ts）并添加以下与 webpack 相关的指令：

declare const module: any;

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);

  if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => app.close());
  }
}
bootstrap();

为了简化执行过程，请在 package.json 文件中添加一个脚本。

"start:dev": "webpack --config webpack.config.js --watch"

现在只需打开命令行并运行以下命令：

npm run start:dev

示例

可以在这里找到一个可运行的示例。

热重载

使用 CLI​

安装​

配置​

热模块替换​

不使用 CLI​

安装​

配置​

热模块替换​

示例​

使用 CLI

安装

配置

热模块替换

不使用 CLI

安装

配置

热模块替换

示例