如何在前端框架中使用裝飾有 NestJS swagger api 的 NX DTO 庫

Question

我的 NX 項目庫中有一個 nestjs dto，聲明如下：

import { ApiProperty } from '@nestjs/swagger';
import { MinLength, MaxLength, IsNotEmpty, IsEmail } from 'class-validator';

class SignInDto {

    @ApiProperty({
        example: 'user@gmail.com',
    })
    @IsEmail()
    @IsNotEmpty()
    username: string;

    @ApiProperty({
        example: 'password',
    })
    @MinLength(8)
    @MaxLength(64)
    @IsNotEmpty()
    password: string;
}

export { SignInDto };

而且我還想使用相同的 dto 和 class 驗證器屬性進行前端表單驗證，反應如下：

import { SignInDto } from '@project/dto';

const SignIn = () => {

    ...

    const {
        register,
        handleSubmit,
        formState: { errors },
    } = useForm<SignInDto>({
        resolver: classValidatorResolver(SignInDto),
    });

    ...
    
}

但它會導致如下錯誤，表示它無法解析節點模塊

WARNING in ../../node_modules/@nestjs/common/utils/load-package.util.js 9:39-59
Critical dependency: the request of a dependency is an expression

WARNING in ../../node_modules/@nestjs/core/helpers/load-adapter.js 9:39-63
Critical dependency: the request of a dependency is an expression

WARNING in ../../node_modules/@nestjs/core/helpers/optional-require.js 6:39-59
Critical dependency: the request of a dependency is an expression

WARNING in ../../node_modules/@nestjs/microservices/client/client-grpc.js 28:14-34
Critical dependency: the request of a dependency is an expression

WARNING in ../../node_modules/@nestjs/microservices/server/server-grpc.js 25:14-34
Critical dependency: the request of a dependency is an expression

WARNING in ../../node_modules/engine.io/node_modules/ws/lib/buffer-util.js 103:21-42
Module not found: Error: Can't resolve 'bufferutil' in '/home/noman1001/Projects/rentigo/node_modules/engine.io/node_modules/ws/lib'

WARNING in ../../node_modules/engine.io/node_modules/ws/lib/validation.js 109:22-47
Module not found: Error: Can't resolve 'utf-8-validate' in '/home/noman1001/Projects/rentigo/node_modules/engine.io/node_modules/ws/lib'

WARNING in ../../node_modules/express/lib/view.js 81:13-25
Critical dependency: the request of a dependency is an expression

WARNING in ../../node_modules/on-finished/index.js 207:11-33
Module not found: Error: Can't resolve 'async_hooks' in '/home/noman1001/Projects/rentigo/node_modules/on-finished'

WARNING in ../../node_modules/raw-body/index.js 302:11-33
Module not found: Error: Can't resolve 'async_hooks' in '/home/noman1001/Projects/rentigo/node_modules/raw-body'

....
....
....

the list goes on

如何保持完整地使用我的 DTO 和 swagger 文檔？

Answer 1

我將錯誤追蹤到 ApiProperty 並導入了“@nestjs/swagger”模塊。

每當我從 DTO 中刪除 Swagger 文檔時，它都能正常編譯。

因此，為了保留我的 swagger 文檔並同時編譯我的前端，我編寫了一個 webpack 加載程序，它只刪除了與 nestjs/swagger 關聯的裝飾器

module.exports = (source) => {
  const regex = /@ApiProperty\((.|\s)*?\)/gm;
  const subst = '';
  const result = source.replace(regex, subst);
  return result;
};

並在前端反應項目的 webpack 配置中使用了該插件

const path = require('path');
const { merge } = require('webpack-merge');

module.exports = (config, context) => merge(config, {
  // use ./loaders/dto-adapter.loader.js
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: path.resolve(__dirname, './loaders/dto-adapter.loader.js'),
        exclude: /node_modules/,
      },
    ],
  },
});

這可以擴展以從 swagger 中消除其他 API 裝飾器

現在前端編譯得很好

編輯：我最初嘗試使用 babel 插件，但它們並不是一直都可靠地執行