前言：

pont 在法語中是 “橋” 的意思，寓意著前後端之間的橋樑。

Pont 把 swagger、rap、dip 等多種接口文檔平臺，轉換成 Pont 元數據。Pont 利用接口元數據，可以高度定製化生成前端接口層代碼，接口 mock 平臺和接口測試平臺。

其中 swagger 數據源，Pont 已經完美支持。並在一些大型項目中使用了近兩年，各種高度定製化需求都可以滿足。

為什麼接口地址又拼錯了？為什麼前端代碼剛寫完，後端接口又變了？為什麼接口文檔在不斷的更新？

以上的疑(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 對代碼更新規則做了徹底的優化，使用代碼懶生成替換全量刪除和重新生成接口文件的邏輯，避免由於大量文件改動導致本地編譯程序卡頓和崩潰。具體使用方式如下：

1. 更新 mod 、bo 後 ，Pont 將自動生新增、修改、刪除 更新的文件，不需要再點擊 generate 按鈕。
2. 點擊 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 的內置模板，該如何接入呢？

首先，必須保證你的模板是按照社區規範的、通用的且符合標準的。

然後，按照 接入規範 接入即可 。

一鍵接入

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

1. 安裝 Pont 相關依賴
2. 參考官方文檔配置 pont-config.json ;
3. 配置 url 請求方法、鉤子。
4. 參考自定義模板文檔開發模板文件 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 的功能遠不止這些， 現在互聯網技術日新月異更新很快，但是該掌握的技術還得掌握。

閱讀更多 程序員楊 的文章

關鍵字: 集成開發環境 設計 JavaScript