VUE 组件转换为微信小程序组件的方法
135 浏览量
2020-10-16
01:09:20
上传
评论
收藏 123KB PDF 举报
VUE 组件转换为微信小程序组件的方法组件转换为微信小程序组件的方法
主要介绍了VUE 组件转换为微信小程序组件的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需
要的朋友可以参考下
简介：简介：
首先我们介绍一下本文的关键点：抽象语法树，它是以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中
的一种结构。
通过操作这棵树，可以精确的定位到声明、赋值、运算语句，从而实现对代码的优化、变更等操作。
本文通过对 VUE 组件的 JavaScript 、CSS模块进行转换，比如 JavaScript模块，包括外层对象，生命周期钩子函数，赋值语
句，组件的内部数据，组件的对外属性等等来实现把一个 VUE 组件转换为 一个小程序组件。
AST 抽象语法树，似乎我们平时并不会接触到。实际上在我们的项目当中，CSS 预处理，JSX 亦或是 TypeScript 的处理，代
码格式化美化工具，Eslint， Javascript 转译，代码压缩，Webpack， Vue-Cli，ES6 转 ES5，当中都离不开 AST 抽象语法树
这个绿巨人。先卖个关子，让我们看一下 AST 到的官方解释：
It is a hierarchical program representation that presents source code structure according to the grammar of a programming
language, each AST node corresponds to an item of a source code.
中文的解释有：
抽象语法树（abstract syntax tree或者缩写为 AST ），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形
式，这里特指编程语言的源代码。和抽象语法树相对的是具体语法树（concrete syntaxtree），通常称作分析树（parse
tree）。一般的，在源代码的翻译和编译过程中，语法分析器创建出分析树。一旦 AST 被创建出来，在后续的处理过程中，
比如语义分析阶段，会添加一些信息。
抽象语法树，它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。
通过操作这棵树，可以精确的定位到声明、赋值、运算语句，从而实现对代码的优化、变更等操作。这些并不是我们想要看到
的。
对于 AST 面纱的神秘感，似乎已经将要揭开。不错，在我刚接触到他的时候，同样感觉确实是难。但是当你开始了解了它以
后，你就会越来越喜欢它。
因为他实在太强大了。AST 本身并不难，难点在于转换的目标对象与源对象的语法差异，当中水深毋庸置疑。但是，这才能
更加激起我们探索他的欲望。在开始之前，我们先看一下 抽象语法树到底长什么样子。
一、一、 一探究竟一探究竟 AST
通过 astexplorer [1] （AST树查看网站），通过他你可以方便的查看代码的语法树，挑你喜欢的库。你可以在线把玩 AST，
而且除了 JavaScript，HTML， CSS 还有很多其它语言的 AST 库，让我们对他有一个感性而直观的认识。
请看下图，看看AST语法树长什么样子：
此图看到的是一个 ExportDefaultDeclaration 也就是export default {}，还有他的位置信息，注释失信，tokens等等。
国际惯例，先来一个小demo
输入数据
function square(n) {
return n * n;
}
处理数据
astFn() {
const code = `function square(n) {
return n * n;
}`;
//得到 AST 语法树
const ast = babylon.parse(code);
traverse(ast, {
enter(path) {
console.log("enter: " + path.node.type);
//如下的语句匹配到 return 中的 n 与参数 n，并且将它替换为 x。
if (path.node.type === "Identifier" && path.node.name === "n") {
path.node.name = "x";
}
资源评论
