為什麼介面地址又拼錯了？為什麼前端程式碼剛寫完，後端介面又變了？為什麼介面文件在不斷的更新？
以上的疑(bao)問(yuan),在日常開發中似乎都很正常，無可厚非，所以我們需要和後端以口頭或文件的形式約定一些一致性的介面。但是由於設計之初缺乏考慮，或者開發完成之後需求變更等原因，約定好的介面頻繁變動似乎也不是什麼新鮮事兒。所以我們才需要和後端去聯調，並在後續的專案維護中，圍繞這些零散而細碎的新增或更改不斷的消耗精力。
當然，這種人力的浪費是可以被減少，甚至消除的。我們需要讓介面文件充分發揮其價值，通過介面文件，我們可以在專案中生成一份型別完美的程式碼並自動同步後端更新，配合 TypeScript 強大的型別推導，可以大大降低前端的聯調成本。並且可以第一時間檢測到並修復由於介面更新導致的問題，使得前端相容成本幾乎為零。
基於以上思路，我們自研並開源了Pont ， Pont是一個前後端資料服務層解決方案。主要是把 swagger、rap、dip 等多種介面文件，轉換成一份介面後設資料以及一份 TypeScript 和 JavaScript API。
得益於開源社群的共建，Pont 自發布以來，已穩定執行兩年了 ???。其中 swagger 資料來源的接入方式，已經在筆者團隊中穩定執行 1 年多了！專案中碰到的各種定製化需求也都可以毫無壓力的滿足。當然， 除了支援經濟體內業務需求外，Pont 也積極響應開源社群的需求。近期 Pont 也迎來了一波大更新，釋出了 1.0 版本並增加了 N 多的特性和功能。那麼，本次更新究竟帶來了哪些新特性？如何使用？且看本文一一道來。
開始之前，如果你對功能強大、簡單易上手的 Pont 還不是很瞭解，趕緊戳這裡
值得關注的新功能
? 程式碼懶更新
? 支援 JS 專案
? 模板中心
? 快速接入
? 自動化 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