怎么將VUE 組件轉換為微信小程序組件

這篇文章主要介紹了怎么將VUE 組件轉換為微信小程序組件，億速云小編覺得不錯，現在分享給大家，也給大家做個參考，一起跟隨億速云小編來看看吧！

Vue的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。

簡介：

首先我們介紹一下本文的關鍵點：抽象語法樹，它是以樹狀的形式表現編程語言的語法結構，樹上的每個節點都表示源代碼中的一種結構。

通過操作這棵樹，可以精確的定位到聲明、賦值、運算語句，從而實現對代碼的優化、變更等操作。

本文通過對 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";
    }
   }
  });
  generate(ast, {}, code);//將 AST 轉換為代碼
  console.log(generate(ast, {}, code).code );//打印出轉換后的 JavaScript 代碼
 }

輸出數據

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

我們看一下我們得到的 AST 樹

接下來我們插入一段 把 VUE 組件轉換為微信小程序組件正則版本的處理

二、 簡單粗暴的版本（VUE 組件轉換為微信小程序組件）

沒有使用 AST 將 VUE 組件轉換成小程序組件的簡易版本介紹

下方是兩段代碼，簡單的邏輯，實現思路，匹配目標字符串，替換字符，然后生成文件。

regs:{//通過標簽匹配來替換對應的小程序支持的標簽
 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: {//通過標簽查找來分離腳本，模板和CSS
 tempStart: '<template>',
 tempEnd: '</template>',
 styleStart: '<style scoped>',
 styleEnd: '</style>',
 scriptStart: '<script>',
 scriptEnd: '</script>'
}

上方是正則版本的一些模板匹配規則，經過后續的一系列處理把一個 VUE組件處理得到對應的小程序的 WXML ，WXSS，JSON，JS，4個文件。

//文件
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個文件，并且生成到對應的目錄下。代碼實現用時較短，后續更改方案，并沒有做優化，這里就不做詳細展開討論這個實現方案了。

回到正題 介紹一下，AST 抽象語法樹的核心部分：

三、 抽象語法樹三大法寶

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

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

[1] babylon：Babylon 是 Babel 的解析器。用于生成 AST 語法樹。

[2] babel-traverse：Babel 的遍歷器，所有的transformers都使用該工具遍歷所有的 AST (抽象語法樹)，維護了整棵樹的狀態，并且負責替換、移除和添加節點。我們可以和 Babylon 一起使用來遍歷和更新節點。

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

整個編譯器就被分成了三部分：分析器、轉換器、生成器，大致的流程是：

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

總結核心三步：

AST 三大法寶

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

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

我們到底是如何通過 AST 將 VUE 組件轉換為微信小程序組件的呢？

四、 VUE 組件轉換為微信小程序組件中 組件的對外屬性、賦值語句的轉換處理

轉換之前的 VUE 組件代碼 Demo

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

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

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

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

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

//AST 轉換 node，nodetype很關鍵
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中使用到數據屬性的方法中。this.prop至this.data.prop等 與 this.setData的處理。
MemberExpression(path) {
 let datasVals = datas.map((item,index) =>{
  return item.key.name //拿到data屬性中的第一級
 })
 if (//含有this的表達式 并且包含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()
   );
   //......
  }
 }
}

轉換之前的js代碼的部分 AST 樹：

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

五， VUE 組件轉換為微信小程序組件中 Export Default 到 Component 構造器的轉換 與 生命周期鉤子函數，事件函數的處理

首先我們看一下要轉換前后的語法樹與代碼如下（明確轉換目標）：

轉換之前的 AST 樹與代碼

export default {// VUE 組件的慣用寫法用于導出對象模塊
  data(){
  },
  methods:{
  },
  props:{
  }
}

轉換之后的 AST 樹與代碼

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

通過以上轉換之前和轉換之后代碼和 AST 的對比我們明確了轉換目標就是 ExportDefault 到 Component構造器的轉換，下面看一下我們是如何處理的：

我們做了什么（在轉換中進入到 ExportDefault 中做對應的處理）:

//ExportDefault 到 Component構造器的轉換
ExportDefaultDeclaration(path) {
//創建 CallExpression Component({})
function insertBeforeFn(path) {
 const objectExpression = t.objectExpression(propertiesAST);
 test = t.expressionStatement(
   t.callExpression(//創建名為 Compontents 的調用表達式，參數為 objectExpression
     t.identifier("Compontents"),[
      objectExpression
     ]
   )
 );
 //最終得到的語法樹
 console.log("test",test)
}
if (path.node.type === "ExportDefaultDeclaration") {
 if (path.node.declaration.properties) {
  //提取屬性并存儲
  propertiesAST = path.node.declaration.properties;
  //創建 AST 包裹對象
  insertBeforeFn(path);      
 }
 //得到我們最終的轉換結果
 console.log(generate(test, {}, code).code);

對于 ExportDefault => Component 構造器轉換還有一種轉換思路 下面我們看一下：

[1] 第一種思路是先提取 ExportDefault 內部所有節點的 AST ，并做處理，然后創建Component構造器，插入提取處理后的 AST，得到最終的 AST

//propertiesAST 這個就是我們拿到的 AST，然后在對應的分支內做對應的處理 以下分別為 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] 第二種思路呢，就是我們上面展示的這種，不過有一個關鍵的地方要注意一下：

//我把 ExportDefaultDeclaration 的處理放到最后來執行，拿到 AST 首先進行轉換。然后在創建得到新的小程序組件JS部分的 AST 即可
traverse(ast, {
   enter(path) {},
   ObjectProperty(path) {},
   ObjectMethod(path) {},
   //......
   ExportDefaultDeclaration(path) {
   //...
   }
})

如果你想在 AST 開始處與結尾處插入，可使用 path 操作：

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

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

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

關于 Data 部分的處理實際上就是：函數表達式轉換為對象表達式 （FunctionExpression 轉換為 ObjectExpression）

轉換之前的 JavaScript 代碼

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

處理后我們得到的

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

通過如上的代碼對比，我們看到了我們的轉換前后代碼的變化：

轉換前后 AST 樹對比圖明確轉換目標：

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

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

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

我們的轉換部分都盡量在一個 Traverse 中處理，減少 AST 樹遍歷的性能消耗

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

七，VUE 組件轉換為微信小程序組件中 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;
}

通過前后代碼的對比，我們看到了單位尺寸的轉換（比如：top: 50px; 轉換為 top: 117rpx;）。

單位的轉換( px 轉為了 rpx )

CSS 又做了哪些處理呢？

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

我們拿 Cssom 來實現上方css代碼的一個簡單的轉換。

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;//轉換比例這個根據情況設置即可
     if(node.type === "Dimension"){//得到要轉換的數字尺寸
      node.value = newVal;
     }
   }
   if(node.unit === "px"){//單位的處理
    node.unit = "rpx"
   }
 });
 console.log(csstree.generate(ast));

當然這只是一個 demo，實際項目中使用還的根據項目的實際情況出發，SCSS，LESS等等的轉換與考慮不同的處理場景哦！

注：本文有些模塊的轉換實現還未在小程序開發工具中測試。

插播一個通過 AST 實現的好東東：

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

js2flowchart使用場景是什么呢？通過流程圖，你可以解釋你的代碼，或者給你代碼寫文檔；通過可視化的解釋學習其他人的代碼；通過簡單的js語法，為每個處理過程簡單的描述創建流程圖。

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

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

八、總結：

通過以上我們的介紹，我們大概對抽象語法樹有了初步的了解。總體思路是：我們用Babel的解析器 把 JavaScript 源碼轉化為抽象語法樹，

再通過 Babel 的遍歷器遍歷 AST (抽象語法樹)，替換、移除和添加節點，得到一個新的 AST 樹。最后， 使用，Babel 的代碼生成器 Babel Generator 模塊 讀取 處理后的 AST 并將其轉換為代碼。任務就完成了！

本文通過對 VUE 組件轉換為微信小程序組件的轉換部分包括如下內容：

1. VUE 組件 JavaScript模塊 對外屬性轉換為小程序對外屬性的處理

2. VUE 組件 JavaScript模塊 內部數據的轉換為小程序內部數據的處理

3. VUE 組件 JavaScript模塊 methods 中的賦值語句轉換為小程序賦值語句的處理

4. VUE 組件 JavaScript模塊 外層對象，生命周期鉤子函數的處理與 CSS 模塊的簡易處理

以上就是億速云小編為大家收集整理的怎么將VUE 組件轉換為微信小程序組件，如何覺得億速云網站的內容還不錯，歡迎將億速云網站推薦給身邊好友。