Hot Reload

Yếu tố ảnh hưởng lớn nhất đến quá trình khởi động (bootstrapping) của ứng dụng là quá trình compile TypeScript. May mắn là, với webpack HMR (Hot-Module Replacement), chúng ta không cần compile lại toàn bộ project mỗi khi có thay đổi. Điều này giảm đáng kể thời gian cần để khởi tạo ứng dụng, và giúp việc phát triển lặp (iterative development) dễ dàng hơn nhiều.

Dùng CLI

Nếu bạn dùng Nest CLI, quá trình cấu hình khá đơn giản. CLI bọc (wrap) webpack, cho phép dùng HotModuleReplacementPlugin.

Cài đặt

Đầu tiên, cài các package cần thiết:

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

Cấu hình

Sau khi cài đặt xong, tạo file webpack-hmr.config.js ở thư mục gốc của ứng dụng.

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 }),
    ],
  };
};

Hàm này nhận object chứa cấu hình webpack mặc định làm đối số đầu tiên, và tham chiếu tới package webpack gốc mà Nest CLI đang dùng làm đối số thứ hai. Ngoài ra, nó trả về một cấu hình webpack đã được sửa đổi, có thêm plugin HotModuleReplacementPlugin, WatchIgnorePlugin, và RunScriptWebpackPlugin.

Hot-Module Replacement

Để bật HMR, mở file entry của ứng dụng (main.ts) và thêm các đoạn code liên quan đến webpack sau:

declare const module: any;

async function bootstrap() {
  if (module.hot?.data?.closePromise) {
    // đợi instance ứng dụng trước đó đóng hoàn toàn
    await module.hot.data.closePromise;
  }

  const app = await NestFactory.create(AppModule, {
    forceCloseConnections: !!module.hot,
  });
  await app.listen(process.env.PORT ?? 3000);

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

Để đơn giản hóa việc chạy, thêm một script vào file package.json.

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

Giờ chỉ cần mở command line và chạy lệnh sau:

$ npm run start:dev

Không dùng CLI

Nếu bạn không dùng Nest CLI, việc cấu hình sẽ phức tạp hơn một chút (cần nhiều bước thủ công hơn).

Cài đặt

Đầu tiên, cài các package cần thiết:

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

Cấu hình

Sau khi cài đặt xong, tạo file webpack.config.js ở thư mục gốc của ứng dụng.

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',
  },
};

Cấu hình này nói cho webpack biết một số điều cần thiết về ứng dụng của bạn: vị trí file entry, thư mục nào sẽ dùng để chứa các file đã compile, và loại loader nào sẽ dùng để compile source file. Nói chung, bạn có thể dùng file này gần như nguyên bản, dù không hiểu hết mọi option.

Hot-Module Replacement

Để bật HMR, mở file entry của ứng dụng (main.ts) và thêm các đoạn code liên quan đến webpack sau:

declare const module: any;

async function bootstrap() {
  if (module.hot?.data?.closePromise) {
    // đợi instance ứng dụng trước đó đóng hoàn toàn
    await module.hot.data.closePromise;
  }

  const app = await NestFactory.create(AppModule, {
    forceCloseConnections: !!module.hot,
  });
  await app.listen(process.env.PORT ?? 3000);

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

Để đơn giản hóa việc chạy, thêm một script vào file package.json.

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

Giờ chỉ cần mở command line và chạy lệnh sau:

$ npm run start:dev

Ví dụ

Bạn có thể xem một ví dụ chạy được tại đây.