代码转换前端低代码⽤到的第三⽅库和思路
1.html2object
该库⽤于将 html 解析为 javascript 对象，或将 javascript 对象转换为 html。
这个库也适⽤于 SFC ⽂件（*.vue）。
2.htmlparser2 、htmlparser
前者可以说是后者的升级版吧，作⽤跟上⾯⼀样，互相转换html或obj对象
上⾯2个都是传⼊字符串，将字符串转换为3层对象：template、script、style
3.  espree 主要⽤来解析js字符串例如： 'let foo = "bar"' ⽣成AST语法树
sourceType : "script" 指定要解析的脚本类型（“script”、“module”或“commonjs”）
ecmaVersion：6  理解为es6
const ast = espree.parse(code, { ecmaVersion: 6, sourceType: "module" });
4. escodegen 主要将AST语法树转换为正常js代码
const newCode = ate(dataAst);
5. css库，⽤于将字符串的css，转化为⼀个对象形式的AST结构
const obj = css.parse(style);
6.渲染界⾯⽤的vue3，vue3接收3层对象：template、script、style的obj，然后⽤$mount传⼊dom需要⼿动挂载的容器上⾯就⾏了。
低代码左侧组件库思路：
1. //将SFC⽂件内容转化为完整字符串
const xmlData = fs.readFileSync(path, {
encoding: "utf-8",
});
2. 使⽤html2object、htmlparser2 、htmlparser
将字符串转换为3层对象：template、script、style
3.对template循环遍历加上⾃定义id属性，后期⽤
4.对script⾥⾯的字符串⽣成AST后再进⾏处理，因为是export default 是个模块⽤module
const ast = espree.parse(code, { ecmaVersion: 6, sourceType: "module" });
单独提取AST⾥⾯的data、methods，形成映射，放到window全局变量下⾯，后续会⽤到这些全局。
之所以要⽤AST语法树，是因为script⾥⾯是包含了data、methods，所以单独分解出来。
或者也可以不⽤那么⿇烦，直接⽤eval转对象，提取⾥⾯的属性，再转字符串存进去。
5.再单独解析css字符串，⽤css库，转化为对象形式的AST抽象语法树做也顺便做映射到window全局
6.当把组件拖到右侧的编辑区⾥⾯的时候，⾥⾯的数据就会从window全局变量⾥⾯获取

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。