前言
開源的一年多來，Fes.js有哪些變化。本期開源由微眾@康悅投稿分享。
【開源】Fes.js for Vue3，簡潔卻不簡單
正文從這開始~~~
/ 誕生 /
轉眼已經加入公司 5 年，一直在做銀行客服業務相關的中後台應用的開發工作；日復一日做相似性很高的開發工作，難免會有些枯燥與乏味，於是乎，思考如何能夠更 Smart 的方式來綜合的優化和提升中後台應用開發的效率。
從過往的工作中提煉了重要的三點， 首先是 Fast ，要有極致敏捷的開發體驗；然後是 Easy，學習成本低容易上手；最後，還要 Strong，代碼穩健性更強，性能優；由此構建成了 Fes.js 這款基於 Vue 3 的前端應用解決方案。
以約定、配置化、組件化的設計思想，讓用戶僅僅關心用組件搭建頁面內容。技術曲線平緩，上手也簡單，經過了多個項目打磨後趨於穩定，豐富的 Vue 3 生態 和 Fes.js 插件，讓業務開發更敏捷，順滑。
/ 成長 /
Fes.js在 2020 年開源之初，只定位在中後台應用解決方案，現在新增了開發 H5 的功能，已經演進為通用前端應用解決方案。接下來，就和大家分享一下 Fes.js 經歷了哪些改造，完成了這次迭代升級，希望能給大家帶來借鑑，也期待大家試用升級後的 Fes.js。
v1
中後台前端應用大多要處理這些事：
構建， dev 和 build
入口 index.html
入口 main.js，初始化 vue 實例
路由相關
權限相關
頁面布局
接口請求
...
在當時 CLI 工具很熱門，比如 Vue-CLI 和團隊內的 mn，他們處理構建相關事情，而其他事情需要項目自行處理。那麼開發新項目步驟就是先拷貝老項目，再改改代碼，再添加新功能，久而久之發現一些問題：
繼承 「待優化」 代碼，不熟悉改起來很費勁，不改又是隱患
技術棧老舊，升級很費勁，不如重新弄一套新的
一個 request 工具函數，十種寫法，維護起來心累
那麼提供一個封裝這些通用功能的框架，統一代碼規範和代碼組織方式，代碼優化和升級交給框架，用戶完全不用操心，v1 版本就做這了這些事。
設計思路
模塊劃分
fes-cli 是命令行工具，提供預編譯、創建工程、開啟開發調試、打包發布等能力。
fes-core 是運行時框架，提供固定頁面布局，提供權限管理、儲存管理、路由管理、接口管理、狀態管理、數據字典管理、環境管理等API。以插件的方式提供運行時的擴展。
fes-ui 是組件庫，包含30+的PC端組件庫，可以快速搭建出增刪改查等頁面。
使用方式
1、全局安裝命令
wnpm i @webank/fes-cli -g
2、在項目中申明依賴
{ "dependencies": { "@webank/fes": "^1.0.0" }}
3、安裝依賴後在項目根目錄運行
fes dev
自此 v1 版本誕生，把開發應用比作建房子的話，使用 fes.js 相當於給你毛坯房，只需要裝修
v2
當 v1 版本迭代運行一段時間後，我們遇到一些問題：
1、模塊劃分不合理
v1 版本對用戶屏蔽了 fes-ui 的概念，用戶不需要了解如何安裝和註冊這些組件，只需要在package.json 中聲明依賴 @webank/fes ，在代碼中使用組件。理想很完美，但是現實很骨感。fes-ui 是高頻更新的，fes-core 是低頻更新的。當 fes-ui 不兼容更新升級大版本號時，由於 @webank/fes 依賴 fes-ui ，那麼 @webank/fes 也必須跟隨升級大版本，給 @webank/fes 可用性穩定性帶來挑戰。
2、全局fes 命令
v1 版本預期用戶在本地全局安裝 fes 命令，在構建平台中也全局安裝 fes 命令，應付不同項目可以節省非常多安裝時間。如果 fes-cli 非常穩定，幾乎不更新，那麼是可行的。然而現實是 fes-cli 也需要更新迭代，同時 fes-cli 提供的預構建、mock等能力需要項目配合，存在不同項目需要使用不同版本 fes-cli 的可能。
準備在 v2 版本解決上面問題。
設計思路
運行思路跟 v1 版本一致，要進行兩項改動：1、拆分 @webank/fes 為 @webank/fes-core 和 @webank/fes-ui，解耦兩個模塊 2、fes-cli 改為項目啟動，非全局安裝。
模塊劃分
使用方式
1、在項目中申明依賴
{ "dependencies": { "@webank/fes-core": "^2.0.0", "@webank/fes-ui": "^2.0.0", }, "devDependencies": { "@webank/fes-cli": "^2.0.0", }}
2、安裝依賴後在項目根目錄運行
fes dev
V2 版本還把Vue 從 1.0 升級到 2.0，webpack 升級到 4.0，帶來了更好的開發體驗。
v3
在 V2 版本運行一段時間後，我們又遇到一些問題：
1、擴展能力弱
V2 版本封裝Vue 的插件能力提供擴展。Vue 插件在運行時做事情，無法在構建階段做事情。比如說我想把 src/icons 文件夾下的 svg 文件自動生成 Vue 組件並註冊，Vue 插件就無法實現。它需要在構建階段掃描 icons 文件夾，根據文件名生成額外代碼。
2、過於固化
使用 fes.js 好比在格局固定的毛坯房基礎上進行裝修，添加各種東西。時代在變，用戶想要有更好居住的體驗，不滿足毛坯房的格局，但是 fes.js 無法變更格局。
為了解決這些問題， fes.js 一是需要強化擴展能力，讓插件支持運行時和構建時。二是不再固定毛坯房的格局，而是把毛坯房的房間抽象為插件，讓用戶自由選擇用什麼插件來組成毛坯房。V3 以插件機制重寫全部代碼。
設計思路
在 webpack 等構建器執行編譯之前，各插件可以讀取文件、配置、環境變量，執行相應邏輯後把運行時代碼寫入.fes 臨時目錄，然後在入口文件 fes.js 添加運行時代碼依賴。通過此方式插件可以支持構建時和運行時擴展能力。此架構下，核心邏輯是插件的生命周期管理。
插件機制
執行 fes dev 的運行流程：
模塊劃分
fes 內置包 preset-build-in和runtime，包含構建、路由、入口文件、運行時插件機制內容，不包含任何業務相關的內容，所以從此 fes.js 搖身一變成為通用的前端應用解決方案。
虛線包含的插件根據業務需求自由挑選。比如開發中後台應用，布局可以使用 fes-plugin-layout，權限設置可以使用 fes-plugin-access。
插件
使用方式
1、在項目中申明依賴
{ "dependencies": { "@fesjs/fes": "^2.0.0" }}
2、安裝依賴後在項目根目錄運行
fes dev
V3 版本還把Vue 升級到 3.0，webpack 升級到 5.0，進一步優化了開發體驗。同時發布了新的基於 Vue3 組件庫 FES-Design，FES-Design 的設計體系目前還在不斷的探索中，希望今後能夠通過更多的積累為用戶提供一款更優秀更專業的企業級產品設計體系。
V4
在開發 v3 版本時 webpack 剛發布5.0，考慮到 webpack 生態，我們繼續用webpack 作為構建器，構建相關的邏輯圍繞 webpack 進行。在去年，前端圈各種構建器方案冒出來了，比如esbuilder、vite、tsc等。體驗 vite 之後覺得真香，webpack 完全打不過，打不過就加入吧！
設計思路
v3 版本中webpack 相關的構建邏輯在包@webank/preset-built-in中，把他們從中剝離出來形成新模塊 fes-builder-webpack，同時基於 vite 開發構建邏輯形成新模塊fes-builder-vite。名稱以fes-builder-開頭的包是負責處理構建邏輯的插件集，會優先加載，實現邏輯的方式依然基於插件機制。
模塊劃分
使用方式
1、在項目中申明依賴
{ "dependencies": { "@fesjs/fes": "^3.0.0", "@fesjs/builder-vite": "^3.0.0" }}
2、安裝依賴後在項目根目錄運行
fes dev/ 未來 /
未來 fes.js 會變成什麼樣，我也不知道，我知道的是 fes.js 跟隨潮流變成適合它的樣子。fes.js 和 fes-design 均已開源，歡迎大家體驗！
fes.js :地址：https://github.com/WeBankFinTech/fes.js文檔：fesjs.mumblefe.cn/next
fes-design:地址：https://github.com/WeBankFinTech/fes-design文檔：fes-design.mumblefe.cn
關於本文作者：@萬純原文：https://mp.weixin.qq.com/s/xpLO23udKG1mP4iEHF_okQ
留言列表