关于前端:曾经辛苦造的轮子现在能否用-ChatGPT-替代呢

上一篇文章 我在 vscode 插件里接入了 ChatGPT，解决了代码变量命名的难题 中，展现了如何在 vscode 插件中应用 ChatGPT 解决代码变量命名的问题。vscode 插件市场中有很多的翻译插件，然而在一些应用场景里是远远比不上 ChatGPT 的，比方只翻译一段 json 数据里的指定字段。那么 ChatGPT 还能做什么呢？是否取代曾经存在的轮子？

以 lowcode 插件中的性能为例，看看能不能用 ChatGPT 代替。

依据 JSON 生成 API 申请办法

首先复制一段 json，比方：

{
    "code": 200,
    "msg": "","result": {"records": [
            {
                "id": "1a2b3c4d5",
                "costCenterCode": "ccx002",
                "costCenterName": "财务部",
                "accountingCode": "ac0887",
                "bankAccountingCode": "bk1290",
                "orderNumber": "od1089",
                "orderAmount": "6158.36",
                "confirmedTime": "2023-02-07T13:47:34.552Z",
                "laborCostExcludingTax": "4629.05"
            }
        ],
        "total": 200
    }
}

不应用 ChatGPT

应用 ChatGPT

能够发现，简直达到了一样的成果，只是 ChatGPT 会慢一点。不应用 ChatGPT 时，插件外部是间接调用库将 json 转成 ts 类型，还做了一些边界解决，比方如果复制的是 json 变量而不是规范的 json 数据，须要将 json 变量变成 json 数据。应用 ChatGPT 对数据就没有很严格的要求，能够是 json 变量，也能够是 json 数据。

非 ChatGPT 的模板

<%- type %>

export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params {id: number;}
  
export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data {xx: string;}
  
export function <%= rawSelectedText %>(params: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params,
  data: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data,
) {return request<I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result>({
    url: `xxxx`,
    method: 'GET',
    params,
    data,
  });
}

ChatGPT 的模板

<%- rawClipboardText %> 
依据这段 json 生成 ts 类型，名字为 I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result
和上面的代码一起返回
export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params {id: number;}
export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data {xx: string;}
export function <%= rawSelectedText %>(params: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params,
    data: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data,
) {return request<I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result>({
        url: `xxxx`,
        method: 'GET',
        params,
        data,
    });
}
返回 markdown 代码块 

模板会应用 ejs 进行编译。

依据 JSON 生成 MOCK 办法

也是先复制一段 json 数据。

不应用 ChatGPT

插件外部是间接遍历 json，把这一段代码通过字符串拼出来。

应用 ChatGPT

这里应用 ChatGPT 的时候，很难让它输入不须要批改就能间接应用的代码，如上的代码里输入了一段无关的内容。

// 调用办法 
getMockData().then(data => { console.log(data); });

ChatGPT 应用的模板：

<%- rawClipboardText %> 
生成一个 js 办法，办法名为 <%= rawSelectedText || 'getRandomData' %>，办法外部应用 mock.js 生成跟下面的 json 一样字段的数据，如果有数组则生成 10 个元素，最终的数据应用 Promise.resolve 返回
返回 markdown 代码块 

依据 JSON 生成 TS 类型

先复制一段 json 数据

不应用 ChatGPT

应用 ChatGPT

依据 JSON 生成 TS 类型 - 去除接口名称

这个用途是：后端接口能够连调的时候替换原有本人事后写的接口类型。

不应用 ChatGPT

应用 ChatGPT

依据 TS 类型生成 API 申请办法

应用场景：后端没有给接口文档，前端依据原型和设计稿形象出数据模型，依据数据模型生成 mock 的 API 申请办法（mock 数据通过实在后端服务提供）。

只复制类型体，不要类型名称，比方：

{
    records: {
      id: string;
      costCenterCode: string;
      costCenterName: string;
      accountingCode: string;
      bankAccountingCode: string;
      orderNumber: string;
      orderAmount: string;
      confirmedTime: string;
      laborCostExcludingTax: string;
    }[];
    total: number;
  }

不应用 ChatGPT

应用 ChatGPT

因为只是将剪贴板里的内容在模板里做了一下拼装，齐全用不到 ChatGPT。

模板如下：

export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result {
    code: number;
    msg: string;
    result: <%- rawClipboardText %>
}

export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params {id: number;}
  
export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data {xx: string;}
  
export function <%= rawSelectedText %>(params: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params,
    data: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data,
) {return request<I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result>({
        url: `xxxx`,
        method: 'GET',
        params,
        data,
    });
}

依据 TS 类型生成 MOCK 办法

应用场景：后端没有给接口文档，前端依据原型和设计稿形象出数据模型，依据数据模型生成 mock 办法（mock 数据没有通过后端服务提供）。

只复制类型体，不要类型名称，比方：

{
    records: {
      id: string;
      costCenterCode: string;
      costCenterName: string;
      accountingCode: string;
      bankAccountingCode: string;
      orderNumber: string;
      orderAmount: string;
      confirmedTime: string;
      laborCostExcludingTax: string;
    }[];
    total: number;
  }

不应用 ChatGPT

应用 ChatGPT

依据 JSON 生成 KOA MOCK

应用场景：mock 数据由 koa 服务提供，依据 json 生成 koa 路由。

不应用 ChatGPT

应用 ChatGPT

依据 TS 类型生成 MOCK

应用场景：后端没有给接口文档，前端依据原型和设计稿形象出数据模型，依据数据模型生成 koa mock 服务。

只复制类型体，不要类型名称，比方：

{
    records: {
      id: string;
      costCenterCode: string;
      costCenterName: string;
      accountingCode: string;
      bankAccountingCode: string;
      orderNumber: string;
      orderAmount: string;
      confirmedTime: string;
      laborCostExcludingTax: string;
    }[];
    total: number;
  }

不应用 ChatGPT

应用 ChatGPT

依据 TS 类型生成组件文档

这也是已经造的轮子 typescript-to-markdown，一个 utools 插件。

成果如图：

应用 ChatGPT

能够看进去，并不是很完满。

总结

ChatGPT 很难输入不须要批改间接粘贴到编辑器中就能用的代码，相比于咱们硬编码写的插件，在效率上还是有所欠缺。然而借助插件来治理 ChatGPT Prompt 模板，复制粘贴还是比上官网或者其它客户端快很多的。

文章没有提到拉取 YAPI 接口文档生成代码的性能，因为 ChatGPT 并不能去拉取接口获取数据，最近在钻研 LangChain，借助这玩意儿或者能够实现。

Prompt 模板

下面所有的模板曾经共享，通过如下形式能够下载到你的我的项目中：