喜大普奔，Pont 1.0 發佈了

爲何接口地址又拼錯了？爲何前端代碼剛寫完，後端接口又變了？爲何接口文檔在不斷的更新？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

基於 swr 的 Hooks 模板

🚀 快速接入

🆕 自動化 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 經過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）在 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