偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

商業(yè)前端TS開發(fā)自動化工具

開發(fā) 前端
在開發(fā)協(xié)作上,前后端的API溝通,大都通過配置swagger api來進行,要不就是口口相傳或者通過寫info文檔來定義結構、入參及出參,這種協(xié)作方式不僅溝通成本高,且前端缺少能主動感知后端API變更的手段。

一、背景

商業(yè)側的業(yè)務比較復雜,B端項目中含有大量常量類的類型判斷,且因歷史原因,很多常量值前端無法直接知其含義,這既不利于新人的上手,也不利于項目的維護。

在開發(fā)協(xié)作上,前后端的API溝通,大都通過配置swagger api來進行,要不就是口口相傳或者通過寫info文檔來定義結構、入參及出參,這種協(xié)作方式不僅溝通成本高,且前端缺少能主動感知后端API變更的手段。

同時,為了提高項目的可維護性,組內推動前端項目TS工程化,在改造過程中,也會因為業(yè)務迭代,需要創(chuàng)建新的項目,而新項目TS工程化的過程,不僅需要自定義大量的類型,也需要定義后端API類型參數(shù),如果全部通過手動敲,代價太大,不僅很容易出錯,也會影響業(yè)務的開發(fā)效率。

因此,為了提升開發(fā)協(xié)作效率,增加前端主動感知API的能力,提升項目的可維護性和開發(fā)效率,開發(fā)實現(xiàn)了TS自動化生成工具。

二、核心功能

  1. 自動生成api函數(shù)體結構
  2. 自動化生成api interface
  3. 自動生成本地mock file
  4. 支持自定義模版輸出改造
  5. 支持駝峰與下劃線轉換輸出
  6. 支持自定義header改造
  7. 同時支持swagger api v2和v3版本

三、轉換原理

swagger api doc的文檔結構

圖片圖片

關鍵屬性拆分:

圖片圖片

注:Template Function可根據實際情況進行覆蓋,默認是商業(yè)側的模版輸出格式。

四、項目接入

工具地址:(Package - @bilibili-business/ad-swagger-fe)

接入步驟:

1.安裝

npm install @bilibili-business/ad-swagger-fe --registry=http://registry.npm.bilibili.co

2.配置模版文件,在項目根目錄下新建swagger.config.js文件(目錄按需)

3.可將示例代碼(下方文檔中)可以直接copy到swagger.config.js文件中

4.替換修改代碼中的source地址,將其替換成目標swagger doc地址

5.命令行中執(zhí)行:node ./swagger.config.js

6.項目中的src目錄下,會多出一個swagger文件夾,即為生成的目標文件

7.可以根據生成的內容,調整工具參數(shù),包括header

模版示例代碼

圖片圖片

五、項目實踐

目前該工具已在商業(yè)前端項目中推廣并廣泛使用,商業(yè)側整體接入率85%, 帶貨項目接入率100%。

生成的API函數(shù)和TS interface 可直接使用,無需手動編碼,業(yè)務開發(fā)效率提升1pd。

舉例:后端API接口數(shù)1556個

圖片圖片

通過工具生成的代碼

  • 生成的API實例

圖片圖片

  • 生成的Interface

圖片圖片

  • 在項目中直接使用

圖片 圖片

本期作者

楊雨浩嗶哩嗶哩資深開發(fā)工程師楊雨浩嗶哩嗶哩資深開發(fā)工程師

責任編輯:武曉燕 來源: 嗶哩嗶哩技術
相關推薦

2017-01-16 13:38:05

前端開發(fā)自動化

2010-12-06 09:54:09

網絡自動化

2009-10-09 17:50:59

VB Script開發(fā)

2022-07-20 12:18:36

Python自動化工具tox

2023-10-25 08:00:00

人工智能游戲開發(fā)

2020-03-31 10:58:35

網絡自動化SD-WAN軟件定義網絡

2010-05-26 16:21:25

2010-12-06 09:56:52

數(shù)據中心網絡

2021-05-19 17:04:29

Python阿里自動化工具

2016-09-08 15:20:04

JavascriptNodeGulp

2025-06-09 18:50:40

2009-07-27 12:54:10

ASP.NET+Ora

2013-12-19 09:56:12

云計算自動化工具云計算管理

2021-05-08 09:00:53

AI 工具人工智能

2012-04-16 10:12:55

云計算自動化

2020-04-26 15:31:58

DevOps自動化工具

2019-09-18 20:39:07

數(shù)據科學自動化工具機器學習

2021-02-22 18:50:03

Ansible系統(tǒng)運維

2021-04-30 13:40:55

Linux自動化工具開源

2019-12-11 11:54:37

IT工具云計算
點贊
收藏

51CTO技術棧公眾號