喜大普奔，Pont 1.0 发布了

时间  2021-08-13 标签 html 前端 java git github npm json 后端 bash markdown

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

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

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

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

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

开始以前，若是你对功能强大、简单易上手的 Pont 还不是很了解，赶忙戳这里npm

值得关注的新功能

🆕 自动化 mock 数据json

📦 代码懒更新后端

🌓 支持 JS 项目bash

🛠 模板中心markdown

🚀 快速接入

🆕 自动化 mock 数据

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

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

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

二、右键 Pont 接口代码，能够访问(visit mocks interface) GET 类型的 mocks 接口。

三、本地 mock 接口默认端口 8080，能够经过 mocks.port 来修改请求端口，访问 mock 数据。

pont 自动化mocks使用方法

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

📦 代码懒更新

Pont 1.0 对代码更新规则作了完全的优化，使用代码懒生成替换全量删除和从新生成接口文件的逻辑，避免因为大量文件改动致使本地编译程序卡顿和崩溃。具体使用方式以下：

  1. 更新 mod 、bo 后 ，Pont 将自动生新增、修改、删除 更新的文件，不须要再点击 generate 按钮。

  2. 点击 generate 按钮（或执行 pont generate）命令生成代码时时，Pont 将读取本地生成的全部代码，在内存中，对比即将生成的代码和本地已经存在的代码，计算须要新增、修改、删除的文件，并进行增量的文件更新或删除。

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

generate code

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

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

为了充分发挥 Pont 的优点，让更多用户体验到 Pont 带来的编辑，咱们增长了 Pont 对于 Javascript 项目的支持， 如今， Pont 将生成 Javascript 代码 和 一份 .d.ts 的类型声明文件。 不管是 Javascript 环境仍是 TypeScript 环境均可以完美支持。

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

js Suprrot

🛠 内置模板支持

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

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

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

templateType

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

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

基于 swr 的 Hooks 模板

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

pontCore

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

pontCore

你能够在项目中经过 PontCore ( Pont 对外暴露的请求单例实体) 来切换请求方法。在项目入口处使用 PontCore.useFetch，传入本身定制的 http 请求方法便可生效。

demo

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

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

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

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

而后，按照 接入规范 接入便可 🤗。

若是你有好的想法或者好的模板，很是欢迎来给咱们提 PR，咱们很是渴望经过社区的力量来共建 Pont。

🚀 一键接入

1.0 以前，若是要接入 Pont，你可能须要作的是:

  1. 安装 Pont 相关依赖

  2. 参考官方文档配置 pont-config.json ;

  3. 配置 url 请求方法、钩子。

  4. 参考自定义模板文档开发模板文件 pontTemplate.ts (可能还须要不断的调试);

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

快速开始流程

  • 一、 环境准备

    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
复制代码

  • 二、将 Pont 接入你的项目

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

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

不管是 pontTemplate， 仍是 request 方法，咱们都已经为你准备好，只须要敲一行命令接入项目便可 😄。

最后

固然， Pont 的功能远不止这些， 若是你对 Pont 想更深刻的了解，请戳这里

另外，你们使用 Pont 有任何的问题和建议，欢迎来骚扰笔者。笔者也但愿感兴趣的小伙伴一块儿来把 Pont 建设的更增强大。

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

若是你在使用过程当中有任何问题，也能够直接扫码进群咨询

关于咱们

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

联系我们 沪ICP备13005482号-10