热重载 Hot Reload

导读

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

警告

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

使用 CLI

如果您使用的是 Nest CLI，则配置过程非常简单。 CLI 包装了 webpack，允许使用 HotModuleReplacementPlugin。

安装

首先安装所需的软件包：

bash

$ 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 文件中添加一个脚本。

json

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

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

bash

$ npm run start:dev

不使用 CLI

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

安装

首先安装所需的软件包：

bash

$ 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 path = require('node:path')
const webpack = require('webpack')
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文件中添加一个脚本。

json

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

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

bash

$ npm run start:dev

示例

此处提供了一个有效示例。