在gRPC-Web的VueJS/TypeScript中找不到导入

Question

我创建了一个简单的VueJS应用程序，并试图实现一个文件上传的示例。

我正在使用下面的proto文件:

syntax = "proto3";
message File {
bytes content = 1;
}
message MetaData {
string name = 1;
string type = 2;
}
message FileUploadRequest {
oneof request {
MetaData metadata = 1;
File file = 2;
}
}
enum Status {
PENDING = 0;
IN_PROGRESS = 1;
SUCCESS = 2;
FAILED = 3;
}
message FileUploadResponse {
string name = 1;
Status status = 2;
}
service FileUploadService {
rpc upload(stream FileUploadRequest) returns(FileUploadResponse);
}

首先生成客户端存根:

protoc -I=${DIR:-./api/} fileUpload.proto 
--js_out=import_style=commonjs,binary:${OUT_DIR:-./api} 
--grpc-web_out=import_style=typescript,mode=grpcwebtext:${OUT_DIR:-./api}

在api目录下生成三个文件:

├── api
│   ├── FileUploadServiceClientPb.ts
│   ├── fileUpload_pb.d.ts
|   ├── fileUpload.proto
│   └── fileUpload_pb.js
└── src
   ├── App.vue
   └── main
       ├── services
       │   └── fileService.ts
        └── views

我现在正在尝试在FileService中实现生成的客户端代码:

import { FileUploadServiceClient } from '../../../api/FileUploadServiceClientPb';
import { FileUploadRequest, FileUploadResponse, MetaData } from '../../../api/fileUpload_pb';
export default class FileService {
constructor(readonly fileUploadClient: FileUploadServiceClient) { }
uploadFile(file: File): Promise<FileUploadResponse | null> {
...
this.fileUploadClient.upload(request, {}, (err, response) => {
...
}
...
}
}

出现以下两个问题

1. 消息和类型的导入似乎不工作，Uncaught SyntaxError: import not found: MetaData.
2. 导入FileUploadServiceClient工作，但它不识别上传方法

我使用的是libprotoc 3.20.1和protoc-gen-grpc-web 1.3.1

我已经谷歌了一下，但没有找到一个可以帮助我的解决方案:

• https://github.com/grpc/grpc-web/issues/431
• https://github.com/grpc/grpc-web/issues/462

为grpc-web_out配置不同的import_style和mode也不能解决问题。顺便说一下，在quarkus应用程序中生成服务器端代码完全可以正常工作。

Answer 1

我也没有成功使用protoc-gen-grpc-web插件。protobuf-ts插件使用起来更好，并且实际工作:https://github.com/timostamm/protobuf-ts/blob/master/MANUAL.md(这是他们手册的链接)

我使用的包是:

• @protobuf-ts/运行时
• @protobuf-ts/plugin(我很确定这可以是一个开发依赖)
• @protobuf-ts/grpcweb-transport(用于创建用于创建客户端的传输对象)