VUE項(xiàng)目基于源碼實(shí)現(xiàn)可視化編程技術(shù)的探索

作者：大前端 2024-10-16 13:47:40

背景

在面對大型且高度組件化的項(xiàng)目時(shí)，傳統(tǒng)的開發(fā)模式——即邊預(yù)覽邊手動(dòng)修改代碼，往往會(huì)因項(xiàng)目結(jié)構(gòu)的復(fù)雜性而顯得效率低下，尤其是對于新加入項(xiàng)目或?qū)?xiàng)目結(jié)構(gòu)不夠熟悉的開發(fā)者而言，從UI界面逆向定位到具體代碼實(shí)現(xiàn)并作出修改的過程尤為耗時(shí)且挑戰(zhàn)重重。為了解決這一問題，提升開發(fā)效率與團(tuán)隊(duì)協(xié)作的流暢度，我們構(gòu)想了一種更為智能和直觀的開發(fā)輔助方案，旨在通過UI直接映射到代碼組件，并簡化代碼編輯過程，將源碼AST與UI做綁定，直接通過UI界面修改屬性或內(nèi)容，并自動(dòng)同步到代碼文件中，實(shí)現(xiàn)一種直觀且高效的可視化編程體驗(yàn)，并通過這種方式來維護(hù)以及新建項(xiàng)目。

傳統(tǒng)低代碼方案帶來的問題

在深入探討基于源碼的可視化編程技術(shù)方案之前，我們先來分析一下傳統(tǒng)低代碼方案所帶來的問題吧。

傳統(tǒng)低代碼方案通過自定義的私有協(xié)議與可視化視圖做綁定，將代碼邏輯抽象成私有描述，使用 JSON 配置來生成頁面，后續(xù)只能通過維護(hù)JSON schema來維護(hù)項(xiàng)目。

功能和組件通常有一定的限制，無法完全滿足所有復(fù)雜的、高度定制化的開發(fā)需求。因?yàn)槭撬接袇f(xié)議，所以定位問題也會(huì)比較困難。

圖片

公有協(xié)議

在摒棄私有協(xié)議，追求廣泛兼容與協(xié)同工作的背景下，軟件開發(fā)社區(qū)積極擁抱公有協(xié)議和標(biāo)準(zhǔn)。其中，抽象語法樹（AST）作為解析JavaScript（及其他編程語言）代碼并轉(zhuǎn)化為結(jié)構(gòu)化數(shù)據(jù)的核心技術(shù)，已成為一個(gè)公認(rèn)的公有協(xié)議。AST還為開發(fā)者提供了一種統(tǒng)一、標(biāo)準(zhǔn)化的方式來理解和操作源代碼。借助AST我們可以非常容易的對代碼進(jìn)行描述以及代碼和協(xié)議之間的互轉(zhuǎn)。

VUE AST Transform

AST的生成通常涵蓋代碼的詞法分析和語法分析階段：

詞法分析：將源代碼分解成一個(gè)個(gè)有意義的單元（tokens），如關(guān)鍵字、標(biāo)識(shí)符、運(yùn)算符等。
語法分析：根據(jù)語言的語法規(guī)則，將tokens組織成AST。在這個(gè)過程中，會(huì)構(gòu)建出表示源代碼結(jié)構(gòu)的樹狀結(jié)構(gòu)，其中每個(gè)節(jié)點(diǎn)對應(yīng)源代碼中的一個(gè)構(gòu)造。

如下所示：

圖片

AST Transform通常包括以下幾個(gè)步驟：

解析（Parsing）：將源代碼轉(zhuǎn)換為AST
轉(zhuǎn)換（Transformation）：遍歷AST并對其進(jìn)行修改
生成（Generation）：將修改后的AST轉(zhuǎn)換回源代碼文本

關(guān)鍵詞說明

VariableDeclaration 變量聲明
Expression：表達(dá)式，MemberExpression、BinaryExpression、UnaryExpression、AssignmentExpression、CallExpression、BindExpression、NewExpression 等...
Statement：語句，由 Expression 組成
...

可以通過訪問https://astexplorer.net在線調(diào)試?yán)斫飧嚓P(guān)鍵詞類型。

解析

js可以通過babel進(jìn)行ast的解析，那vue文件該怎么解析成ast呢，你首先想到的肯定是@vue/compiler-sfc這個(gè)包，我們來看一下效果。

圖片

可以看到descriptor字段里分別用template，script/scriptSetup，styles來描述vue文件的三個(gè)代碼區(qū)塊，所以可以將descriptor看成是vue的ast，理論上來講我們可以通過修改各個(gè)區(qū)塊的ast節(jié)點(diǎn)，最后再通過將descriptor轉(zhuǎn)回vue代碼即可。很可惜的是官方設(shè)計(jì)@vue/compiler-sfc這個(gè)包主要是為了將vue代碼編譯為可以在瀏覽器運(yùn)行的render function，并沒有提供transform的能力，即使修改了ast，也無法將ast轉(zhuǎn)成vue-sfc代碼。

解決方案

為了實(shí)現(xiàn)對vue-sfc代碼的AST修改并重新生成vue-sfc代碼，我們可以采取一種分而治之的策略，針對代碼中的不同區(qū)塊（template, script/scriptSetup, styles）使用不同的工具或庫進(jìn)行處理。通過上述vue ast的數(shù)據(jù)結(jié)構(gòu)可以看到每個(gè)區(qū)塊都有content字段表示當(dāng)前區(qū)塊的源代碼，那是不是可以把template和script交給各自的解析器呢？（style本文不做解析），script區(qū)塊的代碼我們可以直接交給生態(tài)比較成熟的babel來處理，那template呢，我們可以想一下template 默認(rèn)的 lang 屬性是什么？是不是html，那是不是只要找到對應(yīng)的html解析器就可以了。