怎么將VUE 組件轉(zhuǎn)換為微信小程序組件

這篇文章主要介紹了怎么將VUE 組件轉(zhuǎn)換為微信小程序組件，億速云小編覺(jué)得不錯(cuò)，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨億速云小編來(lái)看看吧！

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪(fǎng)問(wèn)速度和用戶(hù)體驗(yàn)。

簡(jiǎn)介：

首先我們介紹一下本文的關(guān)鍵點(diǎn)：抽象語(yǔ)法樹(shù)，它是以樹(shù)狀的形式表現(xiàn)編程語(yǔ)言的語(yǔ)法結(jié)構(gòu)，樹(shù)上的每個(gè)節(jié)點(diǎn)都表示源代碼中的一種結(jié)構(gòu)。

通過(guò)操作這棵樹(shù)，可以精確的定位到聲明、賦值、運(yùn)算語(yǔ)句，從而實(shí)現(xiàn)對(duì)代碼的優(yōu)化、變更等操作。

本文通過(guò)對(duì) VUE 組件的 JavaScript 、CSS模塊進(jìn)行轉(zhuǎn)換，比如 JavaScript模塊，包括外層對(duì)象，生命周期鉤子函數(shù)，賦值語(yǔ)句，組件的內(nèi)部數(shù)據(jù)，組件的對(duì)外屬性等等來(lái)實(shí)現(xiàn)把一個(gè) VUE 組件轉(zhuǎn)換為 一個(gè)小程序組件。

AST 抽象語(yǔ)法樹(shù)，似乎我們平時(shí)并不會(huì)接觸到。實(shí)際上在我們的項(xiàng)目當(dāng)中，CSS 預(yù)處理，JSX 亦或是 TypeScript 的處理，代碼格式化美化工具，Eslint， Javascript 轉(zhuǎn)譯，代碼壓縮，Webpack， Vue-Cli，ES6 轉(zhuǎn) ES5，當(dāng)中都離不開(kāi) AST 抽象語(yǔ)法樹(shù)這個(gè)綠巨人。先賣(mài)個(gè)關(guān)子，讓我們看一下 AST 到的官方解釋?zhuān)?/p>

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.

中文的解釋有：

抽象語(yǔ)法樹(shù)（abstract syntax tree或者縮寫(xiě)為 AST ），或者語(yǔ)法樹(shù)（syntax tree），是源代碼的抽象語(yǔ)法結(jié)構(gòu)的樹(shù)狀表現(xiàn)形式，這里特指編程語(yǔ)言的源代碼。和抽象語(yǔ)法樹(shù)相對(duì)的是具體語(yǔ)法樹(shù)（concrete syntaxtree），通常稱(chēng)作分析樹(shù)（parse tree）。一般的，在源代碼的翻譯和編譯過(guò)程中，語(yǔ)法分析器創(chuàng)建出分析樹(shù)。一旦 AST 被創(chuàng)建出來(lái)，在后續(xù)的處理過(guò)程中，比如語(yǔ)義分析階段，會(huì)添加一些信息。

抽象語(yǔ)法樹(shù)，它以樹(shù)狀的形式表現(xiàn)編程語(yǔ)言的語(yǔ)法結(jié)構(gòu)，樹(shù)上的每個(gè)節(jié)點(diǎn)都表示源代碼中的一種結(jié)構(gòu)。

通過(guò)操作這棵樹(shù)，可以精確的定位到聲明、賦值、運(yùn)算語(yǔ)句，從而實(shí)現(xiàn)對(duì)代碼的優(yōu)化、變更等操作。這些并不是我們想要看到的。

對(duì)于 AST 面紗的神秘感，似乎已經(jīng)將要揭開(kāi)。不錯(cuò)，在我剛接觸到他的時(shí)候，同樣感覺(jué)確實(shí)是難。但是當(dāng)你開(kāi)始了解了它以后，你就會(huì)越來(lái)越喜歡它。

因?yàn)樗麑?shí)在太強(qiáng)大了。AST 本身并不難，難點(diǎn)在于轉(zhuǎn)換的目標(biāo)對(duì)象與源對(duì)象的語(yǔ)法差異，當(dāng)中水深毋庸置疑。但是，這才能更加激起我們探索他的欲望。在開(kāi)始之前，我們先看一下 抽象語(yǔ)法樹(shù)到底長(zhǎng)什么樣子。

一、 一探究竟 AST

通過(guò) astexplorer [1] （AST樹(shù)查看網(wǎng)站），通過(guò)他你可以方便的查看代碼的語(yǔ)法樹(shù)，挑你喜歡的庫(kù)。你可以在線(xiàn)把玩 AST，而且除了 JavaScript，HTML， CSS 還有很多其它語(yǔ)言的 AST 庫(kù)，讓我們對(duì)他有一個(gè)感性而直觀(guān)的認(rèn)識(shí)。

請(qǐng)看下圖，看看AST語(yǔ)法樹(shù)長(zhǎng)什么樣子：

此圖看到的是一個(gè) ExportDefaultDeclaration 也就是export default {}，還有他的位置信息，注釋失信，tokens等等。

國(guó)際慣例，先來(lái)一個(gè)小demo

輸入數(shù)據(jù)

function square(n) {
 return n * n;
}

處理數(shù)據(jù)

astFn() {
  const code = `function square(n) {
    return n * n;
   }`;
  //得到 AST 語(yǔ)法樹(shù)
  const ast = babylon.parse(code);

  traverse(ast, {
   enter(path) {
    console.log("enter: " + path.node.type);
    //如下的語(yǔ)句匹配到 return 中的 n 與參數(shù) n，并且將它替換為 x。
    if (path.node.type === "Identifier" && path.node.name === "n") {
     path.node.name = "x";
    }
   }
  });
  generate(ast, {}, code);//將 AST 轉(zhuǎn)換為代碼
  console.log(generate(ast, {}, code).code );//打印出轉(zhuǎn)換后的 JavaScript 代碼
 }

輸出數(shù)據(jù)

function square(x) {
 return x * x;
}

我們看一下我們得到的 AST 樹(shù)

接下來(lái)我們插入一段 把 VUE 組件轉(zhuǎn)換為微信小程序組件正則版本的處理

二、 簡(jiǎn)單粗暴的版本（VUE 組件轉(zhuǎn)換為微信小程序組件）

沒(méi)有使用 AST 將 VUE 組件轉(zhuǎn)換成小程序組件的簡(jiǎn)易版本介紹

下方是兩段代碼，簡(jiǎn)單的邏輯，實(shí)現(xiàn)思路，匹配目標(biāo)字符串，替換字符，然后生成文件。

regs:{//通過(guò)標(biāo)簽匹配來(lái)替換對(duì)應(yīng)的小程序支持的標(biāo)簽
 toViewStartTags: /(<h2)|(<s)|(<em)|(<ul)|(<li)|(<dl)|(<i)|(<span)/g,
 toViewEndTags: /(<\/h2>)|(<\/s>)|(<\/em>)|(<\/ul>)|(<\/li>)|(<\/dl>)|(<\/i>)|(<\/span>)/g,
 toBlockStartTags: /(<div)|(<p)/g,
 toBlockEndTags: /(<\/div>)|(<\/p>)/g,
},
signObj: {//通過(guò)標(biāo)簽查找來(lái)分離腳本，模板和CSS
 tempStart: '<template>',
 tempEnd: '</template>',
 styleStart: '<style scoped>',
 styleEnd: '</style>',
 scriptStart: '<script>',
 scriptEnd: '</script>'
}

上方是正則版本的一些模板匹配規(guī)則，經(jīng)過(guò)后續(xù)的一系列處理把一個(gè) VUE組件處理得到對(duì)應(yīng)的小程序的 WXML ，WXSS，JSON，JS，4個(gè)文件。

//文件
const wxssFilePath = path.join(dirPath, `${mpFile}.wxss`);
const jsFilePath = path.join(dirPath, `${mpFile}.js`);
const wxmlFilePath = path.join(dirPath, `${mpFile}.wxml`);
const jsonFilePath = path.join(dirPath, `${mpFile}.json`);
if (!fs.existsSync(dirPath)) {
 fs.mkdirSync(dirPath);
}
fs.writeFile(wxssFilePath, wxssContent, err => {
 if (err) throw err;
 //console.log(`dist目錄下生成${mpFile}.wxss文件成功`);
 fs.writeFile(jsFilePath, jsContent, err => {
 if (err) throw err;
    // console.log(`dist目錄下生成${mpFile}.js文件成功`);
    fs.writeFile(wxmlFilePath, wxmlContent, err => {
     if (err) throw err;
     //console.log(`dist目錄下生成${mpFile}.wxml文件成功`);
     fs.writeFile(jsonFilePath, jsonContent, err => {
      if (err) throw err;
      console.log(`dist目錄下生成${mpFile}.json文件成功`)
      resolve(`生成${mpFile}.json文件成功`);
     })
    })
  });
});

上方是處理得到的 WXML ，WXSS，JSON，JS，4個(gè)文件，并且生成到對(duì)應(yīng)的目錄下。代碼實(shí)現(xiàn)用時(shí)較短，后續(xù)更改方案，并沒(méi)有做優(yōu)化，這里就不做詳細(xì)展開(kāi)討論這個(gè)實(shí)現(xiàn)方案了。

回到正題 介紹一下，AST 抽象語(yǔ)法樹(shù)的核心部分：

三、 抽象語(yǔ)法樹(shù)三大法寶

Babel 是 JavaScript 編譯器，更確切地說(shuō)是源碼到源碼的編譯器，通常也叫做“ 轉(zhuǎn)換編譯器（transpiler）”。 意思是說(shuō)你為 Babel 提供一些 JavaScript 代碼，Babel 更改這些代碼，然后返回給你新生成的代碼。

babel-core：Babel 的編譯器；它暴露了 babel.transform 方法。

[1] babylon：Babylon 是 Babel 的解析器。用于生成 AST 語(yǔ)法樹(shù)。

[2] babel-traverse：Babel 的遍歷器，所有的transformers都使用該工具遍歷所有的 AST (抽象語(yǔ)法樹(shù))，維護(hù)了整棵樹(shù)的狀態(tài)，并且負(fù)責(zé)替換、移除和添加節(jié)點(diǎn)。我們可以和 Babylon 一起使用來(lái)遍歷和更新節(jié)點(diǎn)。

[3] babel-generator：Babel 的代碼生成器。它讀取AST并將其轉(zhuǎn)換為代碼。

整個(gè)編譯器就被分成了三部分：分析器、轉(zhuǎn)換器、生成器，大致的流程是：

輸入字符串 -> babylon分析器 parse -> 得到 AST -> 轉(zhuǎn)換器 -> 得到 AST -> babel-generator -> 輸出

總結(jié)核心三步：

AST 三大法寶

babylon.parse => traverse 轉(zhuǎn)換 AST => generate(ast, {}, code).code) 生成

感興趣的童鞋，可以在網(wǎng)上或者看參考資料都有介紹。該鋪墊的都鋪墊的差不多了，進(jìn)入正題。

我們到底是如何通過(guò) AST 將 VUE 組件轉(zhuǎn)換為微信小程序組件的呢？

四、 VUE 組件轉(zhuǎn)換為微信小程序組件中 組件的對(duì)外屬性、賦值語(yǔ)句的轉(zhuǎn)換處理

轉(zhuǎn)換之前的 VUE 組件代碼 Demo

export default {
       //組件的對(duì)外屬性
       props: {
         max: {
           type: Number,
           value: 99
         }
       },
       //組件的內(nèi)部數(shù)據(jù)
       data(){
         return {
          num:10000
         }
       },
       //組件的方法
       methods: {
         textFn() {
          this.num = 2
        },
         onMyButtonTap: function(){
         this.num = 666
        },
       }
      }

處理后我們得到的微信小程序組件 JavaScript 部分代碼

export default {
 properties: {
  //組件的對(duì)外屬性
  max: {
   type: Number,
   value: 99
  }
 },
 //組件的內(nèi)部數(shù)據(jù)
 data(){
  return {
   num: 10000
  }
 },
 //組件的方法
 methods: {
  textFn() {
   this.setData({
    num: 2
   });
  },
  onMyButtonTap: function () {
   this.setData({
    num: 666
   });
  }
 }
};

我們對(duì)js動(dòng)了什么手腳(亦可封裝成babel插件):

//to AST
const ast = babylon.parse(code, {
 sourceType: "module",
 plugins: ["flow"]
});

//AST 轉(zhuǎn)換 node，nodetype很關(guān)鍵
traverse(ast, {
  enter(path) {
   //打印出node.type
   console.log("enter: " + path.node.type);
  }
})

ObjectProperty(path) {
  //props 替換為 properties
  if (path.node.key.name === "props") {
   path.node.key.name = "properties";
  }
}

//修改methods中使用到數(shù)據(jù)屬性的方法中。this.prop至this.data.prop等 與 this.setData的處理。
MemberExpression(path) {
 let datasVals = datas.map((item,index) =>{
  return item.key.name //拿到data屬性中的第一級(jí)
 })
 if (//含有this的表達(dá)式 并且包含data屬性
  path.node.object.type === "ThisExpression" &&
  datasVals.includes(path.node.property.name)
 ) {
  path.get("object").replaceWithSourceString("this.data");
  //判斷是不是賦值操作
  if (
   (t.isAssignmentExpression(path.parentPath) &&
    path.parentPath.get("left") === path) ||
   t.isUpdateExpression(path.parentPath)
  ) {
   const expressionStatement = path.findParent(parent =>
    parent.isExpressionStatement()
   );
   //......
  }
 }
}

轉(zhuǎn)換之前的js代碼的部分 AST 樹(shù)：

具體的 API 使用，童鞋們看一下 babel 相關(guān)的文檔了解一下。

五， VUE 組件轉(zhuǎn)換為微信小程序組件中 Export Default 到 Component 構(gòu)造器的轉(zhuǎn)換 與 生命周期鉤子函數(shù)，事件函數(shù)的處理

首先我們看一下要轉(zhuǎn)換前后的語(yǔ)法樹(shù)與代碼如下（明確轉(zhuǎn)換目標(biāo)）：

轉(zhuǎn)換之前的 AST 樹(shù)與代碼

export default {// VUE 組件的慣用寫(xiě)法用于導(dǎo)出對(duì)象模塊
  data(){
  },
  methods:{
  },
  props:{
  }
}

轉(zhuǎn)換之后的 AST 樹(shù)與代碼

components({//小程序組件的構(gòu)造器
  data(){
  },
  methods:{
  },
  props:{
  }
})

通過(guò)以上轉(zhuǎn)換之前和轉(zhuǎn)換之后代碼和 AST 的對(duì)比我們明確了轉(zhuǎn)換目標(biāo)就是 ExportDefault 到 Component構(gòu)造器的轉(zhuǎn)換，下面看一下我們是如何處理的：

我們做了什么（在轉(zhuǎn)換中進(jìn)入到 ExportDefault 中做對(duì)應(yīng)的處理）:

//ExportDefault 到 Component構(gòu)造器的轉(zhuǎn)換
ExportDefaultDeclaration(path) {
//創(chuàng)建 CallExpression Component({})
function insertBeforeFn(path) {
 const objectExpression = t.objectExpression(propertiesAST);
 test = t.expressionStatement(
   t.callExpression(//創(chuàng)建名為 Compontents 的調(diào)用表達(dá)式，參數(shù)為 objectExpression
     t.identifier("Compontents"),[
      objectExpression
     ]
   )
 );
 //最終得到的語(yǔ)法樹(shù)
 console.log("test",test)
}
if (path.node.type === "ExportDefaultDeclaration") {
 if (path.node.declaration.properties) {
  //提取屬性并存儲(chǔ)
  propertiesAST = path.node.declaration.properties;
  //創(chuàng)建 AST 包裹對(duì)象
  insertBeforeFn(path);      
 }
 //得到我們最終的轉(zhuǎn)換結(jié)果
 console.log(generate(test, {}, code).code);

對(duì)于 ExportDefault => Component 構(gòu)造器轉(zhuǎn)換還有一種轉(zhuǎn)換思路 下面我們看一下：

[1] 第一種思路是先提取 ExportDefault 內(nèi)部所有節(jié)點(diǎn)的 AST ，并做處理，然后創(chuàng)建Component構(gòu)造器，插入提取處理后的 AST，得到最終的 AST

//propertiesAST 這個(gè)就是我們拿到的 AST，然后在對(duì)應(yīng)的分支內(nèi)做對(duì)應(yīng)的處理 以下分別為 data，methods，props，其他的鉤子同樣處理即可
propertiesAST.map((item, index) => {
 if (item.type === "ObjectProperty") {
  //props 替換為 properties
  if (item.key.name === "props") {
   item.key.name = "properties";
  }
 } else if (item.type === "ObjectMethod") {
   if (path.node.key.name === "mounted") {
     path.node.key.name = "ready";
    } else if (path.node.key.name === "created") {
     path.node.key.name = "attached";
    } else if (path.node.key.name === "destroyed") {
     path.node.key.name = "detached";
    } else if (path.node.type === "ThisExpression") {
      if (path.parent.property.name === "$emit") {
      path.parent.property.name = "triggerEvent";
      }
    } else {
     void null;
    }
   }
 } else if (path.node.key.name === "methods") {
   path.traverse({
    enter(path) {
      if (path.node.type === "ThisExpression") {
       if (path.parent.property.name === "$emit") {
        path.parent.property.name = "triggerEvent";
       }
      }
    }
   })
 }
 else {
  //...
  console.log("node type", item.type);
 }
});

[2] 第二種思路呢，就是我們上面展示的這種，不過(guò)有一個(gè)關(guān)鍵的地方要注意一下：

//我把 ExportDefaultDeclaration 的處理放到最后來(lái)執(zhí)行，拿到 AST 首先進(jìn)行轉(zhuǎn)換。然后在創(chuàng)建得到新的小程序組件JS部分的 AST 即可
traverse(ast, {
   enter(path) {},
   ObjectProperty(path) {},
   ObjectMethod(path) {},
   //......
   ExportDefaultDeclaration(path) {
   //...
   }
})

如果你想在 AST 開(kāi)始處與結(jié)尾處插入，可使用 path 操作：

path.insertBefore(
 t.expressionStatement(t.stringLiteral("start.."))
);
path.insertAfter(
 t.expressionStatement(t.stringLiteral("end.."))
);

注：關(guān)于微信小程序不支持 computed , 與 watch，我們具體的初期采用的方案是掛載 computed 和 watch 方法到每一個(gè)微信小程序組件，讓小程序組件也支持這兩個(gè)功能。

六，VUE 組件轉(zhuǎn)換為微信小程序組件中 的 Data 部分的處理：

關(guān)于 Data 部分的處理實(shí)際上就是：函數(shù)表達(dá)式轉(zhuǎn)換為對(duì)象表達(dá)式 （FunctionExpression 轉(zhuǎn)換為 ObjectExpression）

轉(zhuǎn)換之前的 JavaScript 代碼

export default {
  data(){//函數(shù)表達(dá)式
   return {
    num: 10000,
    arr: [1, 2, 3],
    obj: {
     d1: "val1",
     d2: "val2"
    }
   }
  }
}

處理后我們得到的

export default {
 data: {//對(duì)象表達(dá)式
  num: 10000,
  arr: [1, 2, 3],
  obj: {
   d1: "val1",
   d2: "val2"
  }
 }
};

通過(guò)如上的代碼對(duì)比，我們看到了我們的轉(zhuǎn)換前后代碼的變化：

轉(zhuǎn)換前后 AST 樹(shù)對(duì)比圖明確轉(zhuǎn)換目標(biāo)：

我們對(duì) JavaScript 動(dòng)了什么手腳(亦可封裝成babel插件):

const ast = babylon.parse(code, {
 sourceType: "module",
 plugins: ["flow"]
});

//AST 轉(zhuǎn)換node、nodetype很關(guān)鍵
traverse(ast, {
 enter(path) {
  //打印出node.type
  console.log("enter: " + path.node.type);
 }
})

我們的轉(zhuǎn)換部分都盡量在一個(gè) Traverse 中處理，減少 AST 樹(shù)遍歷的性能消耗

//Data 函數(shù)表達(dá)式 轉(zhuǎn)換為 Object
ObjectMethod(path) {
 // console.log("path.node ",path.node )// data, add, textFn
 if (path.node.key.name === "data") {
  // 獲取第一級(jí)的 BlockStatement，也就是 Data 函數(shù)體
  path.traverse({
   BlockStatement(p) {
    //從 Data 中提取數(shù)據(jù)屬性
    datas = p.node.body[0].argument.properties;
   }
  });
  //創(chuàng)建對(duì)象表達(dá)式
  const objectExpression = t.objectExpression(datas);
  //創(chuàng)建 Data 對(duì)象并賦值
  const dataProperty = t.objectProperty(
   t.identifier("data"),
   objectExpression
  );
  //插入到原 Data 函數(shù)下方
  path.insertAfter(dataProperty);
  //刪除原 Data 函數(shù)節(jié)點(diǎn)
  path.remove();
 }
}

七，VUE 組件轉(zhuǎn)換為微信小程序組件中 CSS 部分的處理：

那 CSS 我們也是必須要處理的一部分，let try

以下是我們要處理的css樣本

const code = `
 .text-ok{
  position: absolute;
  right: 150px;
  color: #e4393c;
  }
 .nut-popup-close{
  position: absolute;
  top: 50px;
  right: 120px;
  width: 50%;
  height: 200px;
  display: inline-block;
  font-size: 26px;
 }`;

處理后我們得到的

.text-ok {
 position: absolute;
 right: 351rpx;
 color: #e4393c;
}

.nut-popup-close {
 position: absolute;
 top: 117rpx;
 right: 280.79rpx;
 width: 50%;
 height: 468rpx;
 display: inline-block;
 font-size: 60.84rpx;
}

通過(guò)前后代碼的對(duì)比，我們看到了單位尺寸的轉(zhuǎn)換（比如：top: 50px; 轉(zhuǎn)換為 top: 117rpx;）。

單位的轉(zhuǎn)換( px 轉(zhuǎn)為了 rpx )

CSS 又做了哪些處理呢？

同樣也有不少的 CSS Code Parsers 供我們選擇 Cssom ，CssTree等等，

我們拿 Cssom 來(lái)實(shí)現(xiàn)上方css代碼的一個(gè)簡(jiǎn)單的轉(zhuǎn)換。

var ast = csstree.parse(code);
  csstree.walk(ast, function(node) {
   if(typeof node.value == "string" && isNaN(node.value) != true){
    let newVal = Math.floor((node.value*2.34) * 100) / 100;//轉(zhuǎn)換比例這個(gè)根據(jù)情況設(shè)置即可
     if(node.type === "Dimension"){//得到要轉(zhuǎn)換的數(shù)字尺寸
      node.value = newVal;
     }
   }
   if(node.unit === "px"){//單位的處理
    node.unit = "rpx"
   }
 });
 console.log(csstree.generate(ast));

當(dāng)然這只是一個(gè) demo，實(shí)際項(xiàng)目中使用還的根據(jù)項(xiàng)目的實(shí)際情況出發(fā)，SCSS，LESS等等的轉(zhuǎn)換與考慮不同的處理場(chǎng)景哦！

注：本文有些模塊的轉(zhuǎn)換實(shí)現(xiàn)還未在小程序開(kāi)發(fā)工具中測(cè)試。

插播一個(gè)通過(guò) AST 實(shí)現(xiàn)的好東東：

將 JavaScript 代碼轉(zhuǎn)化生成 SVG 流程圖 js2flowchart( 4.5 k stars 在 GitHub )
當(dāng)你擁有 AST 時(shí)，可以做任何你想要做的事。把AST轉(zhuǎn)回成字符串代碼并不是必要的，你可以通過(guò)它畫(huà)一個(gè)流程圖，或者其它你想要的東西。

js2flowchart使用場(chǎng)景是什么呢？通過(guò)流程圖，你可以解釋你的代碼，或者給你代碼寫(xiě)文檔；通過(guò)可視化的解釋學(xué)習(xí)其他人的代碼；通過(guò)簡(jiǎn)單的js語(yǔ)法，為每個(gè)處理過(guò)程簡(jiǎn)單的描述創(chuàng)建流程圖。

馬上用最簡(jiǎn)單的方式嘗試一下吧，去線(xiàn)上編輯看看 js-code-to-svg-flowchart [8]。

此處有必要附上截圖一張。

八、總結(jié)：

通過(guò)以上我們的介紹，我們大概對(duì)抽象語(yǔ)法樹(shù)有了初步的了解。總體思路是：我們用Babel的解析器 把 JavaScript 源碼轉(zhuǎn)化為抽象語(yǔ)法樹(shù)，

再通過(guò) Babel 的遍歷器遍歷 AST (抽象語(yǔ)法樹(shù))，替換、移除和添加節(jié)點(diǎn)，得到一個(gè)新的 AST 樹(shù)。最后， 使用，Babel 的代碼生成器 Babel Generator 模塊 讀取 處理后的 AST 并將其轉(zhuǎn)換為代碼。任務(wù)就完成了！

本文通過(guò)對(duì) VUE 組件轉(zhuǎn)換為微信小程序組件的轉(zhuǎn)換部分包括如下內(nèi)容：

1. VUE 組件 JavaScript模塊 對(duì)外屬性轉(zhuǎn)換為小程序?qū)ν鈱傩缘奶幚?/p>

2. VUE 組件 JavaScript模塊 內(nèi)部數(shù)據(jù)的轉(zhuǎn)換為小程序內(nèi)部數(shù)據(jù)的處理

3. VUE 組件 JavaScript模塊 methods 中的賦值語(yǔ)句轉(zhuǎn)換為小程序賦值語(yǔ)句的處理

4. VUE 組件 JavaScript模塊 外層對(duì)象，生命周期鉤子函數(shù)的處理與 CSS 模塊的簡(jiǎn)易處理

以上就是億速云小編為大家收集整理的怎么將VUE 組件轉(zhuǎn)換為微信小程序組件，如何覺(jué)得億速云網(wǎng)站的內(nèi)容還不錯(cuò)，歡迎將億速云網(wǎng)站推薦給身邊好友。