带有 typescript vite React 应用程序的 Probuf 编译器

Question

我已经在 typescript 中设置了一个 React vite 应用程序，我想使用 google grpc 来处理 api 请求。我制作了一个 protobuf 文件，并使用以下命令为我的 React 应用程序生成前端代码，以发出 grpc 请求。

protoc  --js_out=import_style=commonjs:./src/proto --grpc-web_out=import_style=typescript,mode=grpcwebtext:./src/proto -I ../back_end/proto ../back_end/proto/*.proto

它在我的 src/proto 目录中创建三个文件。

我将其中一个客户端从 Twitter_cloneServiceClientPb.ts 导入到另一个实用程序类中，如下所示

import { UserClient } from "../../proto/Twitter_cloneServiceClientPb";
import { APP_URL } from "../../utils/constants";

export class ClientService {
    private client: UserClient;
    constructor(){
         this.client = new UserClient(APP_URL);
    }
}

当我执行yarn run dev 并打开网页浏览器时，什么也没有出现。检查控制台，出现此错误。我在这里不知所措。

我希望一切都能正常运行，没有错误。 我按照这个人的教程进行 grpc 设置。

https://www.youtube.com/watch?v=NFZbTy_B4H0&t=1894s

Answer 1

我想通了。如果你像我一样使用 typescript 和 vite，请确保在进行 protoc 编译之前 npm 安装此插件。 https://github.com/timostamm/protobuf-ts