为什么接口地址又拼错了？为什么前端代码刚写完，后端接口又变了？为什么接口文档在不断的更新？

以上的疑(bao)问(yuan),在日常开发中似乎都很正常，无可厚非，所以我们需要和后端以口头或文档的形式约定一些一致性的接口。但是由于设计之初缺乏考虑，或者开发完成之后需求变更等原因，约定好的接口频繁变动似乎也不是什么新鲜事儿。所以我们才需要和后端去联调，并在后续的项目维护中，围绕这些零散而细碎的新增或更改不断的消耗精力。

当然，这种人力的浪费是可以被减少，甚至消除的。我们需要让接口文档充分发挥其价值，通过接口文档，我们可以在项目中生成一份类型完美的代码并自动同步后端更新，配合 TypeScript 强大的类型推导，可以大大降低前端的联调成本。并且可以第一时间检测到并修复由于接口更新导致的问题，使得前端兼容成本几乎为零。

基于以上思路，我们自研并开源了Pont ， Pont是一个前后端数据服务层解决方案。主要是把 swagger、rap、dip 等多种接口文档，转换成一份接口元数据以及一份 TypeScript 和 JavaScript API。

得益于开源社区的共建，Pont 自发布以来，已稳定运行两年了 🎉🎉🎉。其中 swagger 数据源的接入方式，已经在笔者团队中稳定运行 1 年多了！项目中碰到的各种定制化需求也都可以毫无压力的满足。当然，除了支持经济体内业务需求外，Pont 也积极响应开源社区的需求。近期 Pont 也迎来了一波大更新，发布了 1.0 版本并增加了 N 多的特性和功能。那么，本次更新究竟带来了哪些新特性？如何使用？且看本文一一道来。

开始之前，如果你对功能强大、简单易上手的 Pont 还不是很了解，赶紧戳这里

值得关注的新功能

🆕 自动化 mock 数据

📦 代码懒更新

🌓 支持 JS 项目

🛠 模板中心

基于 swr 的 Hooks 模板

🚀 快速接入

🆕 自动化 mock 数据

mock 接口数据一直是用户呼声较高的功能，在开发阶段,无论人工造数据还是使用各种 mock 平台，都相对繁琐，投入产出比较低。

Pont 在 1.0 版本增加本地自动化 mock 数据，在 pont-config.json 中将 mocks.enable 置为 true，Pont 将自动根据接口参数类型，生成所有 mocks 数据，并提供所有接口的 mocks 服务。此外 IDE 还提供如下功能

1、右键 Pont 接口代码，可以跳转(jump to mock position)去编辑接口的 mocks 数据

2、右键 Pont 接口代码，可以访问(visit mocks interface) GET 类型的 mocks 接口。

3、本地 mock 接口默认端口 8080，可以通过 mocks.port 来修改请求端口，访问 mock 数据。

Pont 通过Mock.js生成 Mock 数据，具体介绍请参考Mock.js 文档

📦 代码懒更新

Pont 1.0 对代码更新规则做了彻底的优化，使用代码懒生成替换全量删除和重新生成接口文件的逻辑，避免由于大量文件改动导致本地编译程序卡顿和崩溃。具体使用方式如下：

更新 mod 、bo 后，Pont 将自动生新增、修改、删除更新的文件，不需要再点击 generate 按钮。
点击 generate 按钮（或执行 pont generate）命令生成代码时时，Pont 将读取本地生成的所有代码，在内存中，对比即将生成的代码和本地已经存在的代码，计算需要新增、修改、删除的文件，并进行增量的文件更新或删除。

代码懒更新，再多的接口，重新 generate 也不会卡顿

除非本地文件损坏，否则更新都是可预测的。

🌓 JS 环境支持，并提供完整的类型定义文件

为了充分发挥 Pont 的优势，让更多用户体验到 Pont 带来的编辑，我们增加了 Pont 对于 Javascript 项目的支持，现在， Pont 将生成 Javascript 代码和一份 .d.ts 的类型声明文件。无论是 Javascript 环境还是 TypeScript 环境都可以完美支持。

现在，配置文件中新增了 surrounding 变量(javaScript | typeScript)，用于声明当前项目环境。已接入 Pont 的项目，不需要关心此项改动， surrounding 默认为 typeScript ，对于老用户，我们不会对生成的文件作改动, 大可以放心升级 😄。

🛠 内置模板支持

1.0 之前接入 Pont，你可能需要参考自定义代码生成器文档, 并开启 VS Code 的 Toggle Developer Tools 去不断调试。所以，在项目接入过程中，模板的开发也是开源用户咨询最多的点之一。

为了优化使用体验，降低用户使用成本，并充分发挥 Pont 优势，我们将团队的最佳实践分享出来，并封装成不同框架、语言的模板供用户选择。

目前 Pont 中已经内置了 fetch 、 hooks两种模板。并在 pont--config.json 中新增了对应的 templateType 配置项来开启对应的内置模板。

当然，我们不会每次都覆盖你本地的模板文件，只有检测到模板路径中不存在模板文件时，才会生成默认的模板文件。

为了不影响已经接入 Pont 的项目，surrounding 为 typeScript 时内置模板将无法接入，如果你已经接入 Pont 并想体验内置模板，请在 pont-config.json 中将 surrounding 设置为 javaScript。

基于 swr 的 Hooks 模板

结合团队对于 Hooks 的最佳实践建议，我们在 Pont 中内置了基于 SWR 的 Hooks 模板, 支持基于 useSWR 的 useRequest 等方法，省去繁琐的配置流程，开箱即用，大大提高了 React Hooks 项目开发效率。

关于 Hooks 模板的接入流程，请参考Hooks 模板接入流程
更多 Hook 模板特性，请参考Hooks 模板特性一览

pontCore

有了模板，你还需要开发一个可用的 http 请求库，并接入 Pont 模板中。不过，这些问题细心的我们已经为你考虑好了，我们在 1.0 版本中新增了 pontCore.js 。 pontCore.js 是一个基于 fetch 的 http 请求单例，并且所有的 Pont 内置模板中都已接入，你需要做的仅仅是配置好模板，并安静的等待代码生成 🤗。

你可以在项目中通过 PontCore ( Pont 对外暴露的请求单例实体) 来切换请求方法。在项目入口处使用 PontCore.useFetch，传入自己定制的 http 请求方法即可生效。

pontCore 更多信息请参考pontCore 使用文档

内置模板功能强大, 关于内置模板更多更详细的介绍，请参考内置模板使用方法及贡献流程

如果我想提供模板作为 Pont 的内置模板，该如何接入呢？🤔

首先，必须保证你的模板是按照社区规范的、通用的且符合标准的。

然后，按照接入规范接入即可 🤗。

如果你有好的想法或者好的模板，非常欢迎来给我们提 PR，我们非常渴望通过社区的力量来共建 Pont。

🚀 一键接入

1.0 之前，如果要接入 Pont，你可能需要做的是:

安装 Pont 相关依赖
参考官方文档配置 pont-config.json ;
配置 url 请求方法、钩子。
参考自定义模板文档开发模板文件 pontTemplate.ts (可能还需要不断的调试);

那么，新的接入流程是什么样的呢 —— pont start 😄

快速开始流程

1、环境准备

1）在 vscode 中安装 vscode 插件 pont 以获取 pont 的全部能力。插件使用方法请参考：vscode-pont

2）全局安装 pont-engine
```
// npm
npm i -g pont-engine 
// 或yarn
yarn global add pont-engine
```
3）在项目中安装 pont-engine
```
// npm
npm i pont-engine
// 或yarn
yarn add pont-engine
```

2、将 Pont 接入你的项目

在你的项目中运行 pont start 命令，按照提示输入配置即可。

Pont 一旦检测到有效的 pont-config.json 文件即可启动。

不论是 pontTemplate，还是 request 方法，我们都已经为你准备好，只需要敲一行命令接入项目即可 😄。

最后

当然， Pont 的功能远不止这些，如果你对 Pont 想更深入的了解，请戳这里

另外，大家使用 Pont 有任何的问题和建议，欢迎来骚扰笔者。笔者也希望感兴趣的小伙伴一起来把 Pont 建设的更加强大。

除了 Pont，我们也开源了国际化全流程解决方案-kiwi,一键接入，省时省力省心还省钱！

如果你在使用过程中有任何问题，也可以直接扫码进群咨询

关于我们

我们是阿里巴巴-数据技术及产品部-体验技术团队，主要支撑 QuickBI, FBI 等数据产品，团队技术好、大神多、妹子也多。并且BU业务发展迅速，招聘要求也相对宽松，如果有兴趣，欢迎随时勾搭（勾搭必回复）~~~ 如果你有兴趣加入我们，也可以将简历直接发送到我的邮箱 zl170643@alibaba-inc.com