作者：vivo 互聯網前端團隊-Wan Anwen、Hu Feng、Feng Wei、Xie Tao進入互聯網“下半場”，靠“人海戰術”的研發模式已經不再具備競爭力，如何通過技術升級提升研發效能？前端通過Babel等編譯技術發展實現了工程化體系升級，如何進一步通過編譯技術賦能前端開發？或許我們 wepy 到uniapp 編譯的轉換實踐，能給你帶來啟發 。
一、 背景隨著小程序的出現，借助微信的生態體系和海量用戶，使服務以更加便捷方式的觸達用戶需求 ?；诖吮尘?，團隊很早布局智能導購小程序（為 vivo 各個線下門店導購提供服務的用戶運營工具）的開發 。
早期的小程序開發工程體系還不夠健全，和現在的前端的工程體系相差較大，表現在對模塊化，組件化以及高級JavaScript 語法特性的支撐上 。所以團隊在做技術選型時，希望克服原生小程序工程體系上的不足，經過對比最后選擇了騰訊出品的 wepy 作為整體的開發框架 。
在項目的從0到1階段，wepy 確實幫助我們實現了快速的業務迭代 ， 滿足線下門店導購的需求 。但隨著時間的推移，在技術上，社區逐步沉淀出以 uniapp 為代表的 Vue 棧體系和以 Taro 為代表的 React 棧跨端的體系，wepy 目前的社區活躍度比較低 。另外隨著業務進入穩定階段，除少量的 wepy 小程序，H5 項目和新的小程序都是基于 Vue 和 uniapp 來構建 ， 團隊也是希望統一技術棧，實現更好的跨端開發能力，降低開發和維護成本，提升研發效率 。
二、思考隨著團隊決定將智能導購小程序從 wepy 遷移到 uniapp 的架構體系，我們就需要思考，如何進行項目的平穩的遷移，同時兼顧效率和質量？通過對當前的項目狀態和技術背景進行分析 ， 團隊梳理出2個原則3種遷移思路 。
2.1 漸進式遷移核心出發點 ， 保證項目的平穩過渡，給團隊更多的時間，在迭代中逐步的進行架構遷移 。希望以此來降低遷移中的風險和不可控的點 ?；诖?nbsp;， 我們思考兩個方案：
方案一 融合兩套架構體系
在目前的項目中引入和 uniapp 的項目體系 ， 一個項目融合了 wepy 和 uniapp 的代碼工程化管理，逐步的將 wepy 的代碼改成 uniapp 的代碼，待遷移完成刪除 wepy 的目錄 。這種方案實現起來不是很復雜，但是缺點是管理起來比較復雜，兩套工程化管理機制，底層的編譯機制，各種入口的配置文件等 ， 管理起來比較麻煩 。另外團隊每個人都需要消化 wepy 到 uniapp 的領域知識遷移，不僅僅是項目的遷移也是知識體系的遷移 。
方案二 設計 wepy-webpack-loader
以 uniapp 為工程體系基礎，核心思路是將現有 wepy 代碼融入到 uniapp 的體系中來 。我們都知道 uniapp 的底層依賴于 Vue 的 cli 的技術體系 ， 最底層通過 webpack 實現對 Vue 單組件文件和其他資源文件的 bundle 。
基于此，我們可以開發一個 wepy 的 webpack 的 loader，wepy-loader 類似于 vue-loader 的能力，通過該 loader 對 wepy 文件進行編譯打包 ， 然后最終輸出小程序代碼 。想法很簡單，但我們想要實現 wepy-loader工作量還是比較大的，需要對 wepy 的底層編譯器進一步進行分析拆解，分析 wepy 的依賴關系，區分是組件編譯還是 page 編譯等 ， 且 wepy 底層編譯器的代碼比較復雜，實現成本較高 。
2.2 整體性遷移構建一個編譯器實現 wepy 到 uniapp 的自動代碼轉換 。
通過對 wepy 和 uniapp 整體技術方案的梳理，加深了對兩套架構差異性的認知和理解 ， 尤其 wepy 上層語法和 Vue 的組件開發的代碼上的差異性 ?；趫F隊對編譯的認知 ， 我們認為借助 babel 等成熟編譯技術是有能力實現這個轉換的過程，另外，通過編譯技術會極大的提升整體的遷移的效率 。
2.3 方案對比
文章插圖
通過團隊對方案的深入討論和技術預研，最終大家達成一致使用編譯轉換的方式（方案三）來進行本次的技術升級 。最終，通過實現 wepy 到 uniapp 的編譯轉換器 ， 使原本 25人/天的工作量，6s 完成 。
如下動圖所示：
文章插圖
文章插圖
三、架構設計3.1 wepy 和 uniapp 單文件組件轉換通過對 wepy 和 uniapp 的學習 ， 充分了解兩者之間的差異性和相識點 。wepy 的文件設計和 Vue 的單文件非常的相似，包含 template 和 script 和 style 的三部分組成 。
推薦閱讀
- 之六 2流高手速成記：從SpringBoot到SpringCloudAlibaba
- Windows下自動云備份思源筆記到Gitee
- 原神和蘭那庫拉一起找到枝任務怎么完成
- DNF濃縮的純潔之骸到底怎么獲得（dnf濃縮的純潔之骸在哪搬磚)
- 濃縮的異界精髓，濃縮的純潔之骸在哪里可以得到
- dnf濃縮的純潔之骸有什么用怎么得到（dnf怎么獲得純潔之骸)
- 地下城與勇士濃縮的純潔之骸怎么可以弄到（地下城與勇士怎么獲得極品裝備)
- DNF濃縮的純潔之骸要怎么才能得到（dnf濃縮的純潔之骸在哪搬磚)
- 嘉峪關到張掖-嘉峪關到張掖多少公里
- DNF傳說勛章怎樣獲得,哪里獲得勛章（dnf如何快速得到勛章)