與Vue Service Bay會面 - 您的微型耐用性，在vue.js組件中進行毫不費力的批量修改。告別乏味，手動重構，並使用這種輕巧但功能強大的工具加速您的開發管道。
重構通常遵循兩種方法之一：增量或批發。您選擇的方法取決於您的項目。例如，如果您需要一次在整個代碼庫上應用新的設計系統，則此工具是無價的。機器可以比人類更快，更準確地執行簡單任務。使用此庫自動化重構任務將顯著提高效率和準確性。該存儲庫提供了將這種重構應用於vue.js組件的工具。
以下流程圖簡化了此存儲庫與您的工作流程之間的相互作用：
流圖LR
vue Service Bay子圖
V1 [讀取VUE文件] - > V2 [按節拆分]
V2 [按節分開] - > v3 [解析至AST]
v4 [ast to vue文件]
結尾
子圖用戶土地的代碼
V3-> U1 [操縱AST]
U1-> V4
結尾
即使您不熟悉AST（抽象的語法樹）操縱，該存儲庫也提供了很多示例來吸引您。
要嘗試此工具，請克隆存儲庫：
git clone [email protected]:flyle-io/vue-service-bay.git
cd vue-service-bay
npm install
cd packages/examples
node migration/index.js
# Check the migration results however you like!
git difftool將VUE Service Bay安裝為DEV依賴性：
npm i -D vue-service-bay -D標誌將軟件包安裝為開發依賴關係。
首先，您需要創建一個遷移跑者腳本。有關更多詳細信息，請參閱我們的示例中的index.js。
接下來，您需要實現特定的遷移邏輯。有關更多詳細信息，請參見我們的示例：
（MagicString是對ASTS進行更改的便捷方法。有關更多信息，請訪問https://github.com/rich-harris/magic-string）
執行您的遷移跑步者腳本：
node index.js對於首次觀看者來說，AST很複雜且奇怪。另一方面，如果您可以掌握AST，它們可能是重構和其他語言處理程序的絕佳武器。在這裡，我們將解釋如何以簡單的方式理解AST。
首先，編程語言通常被視為抽象語法樹（AST），以便於理解。 AST是編譯器廣泛使用的數據結構，以表示程序代碼的結構。
該庫還使用AST進行重構。簡而言之，一個程序變成了AST，然後將AST操縱並再次寫入程序中。
幸運的是，有一些工具可以輕鬆理解AST。那是AST Explorer。
使用AST Explorer，我們可以通過單擊任何地方自動跳到相應的AST。這使得很容易找到有關我們要處理的節點及其周圍節點（包括父母）的信息。
最後，我們將解釋如何查看每種語言的AST。
我們將htmlparser2用於HTML解析器。在此庫的原始實現時， htmlparser2是唯一可以正確寫入ASTS回到HTML的主要解析器。
要查看由htmlparser2解析的AST，請在AST Explorer中選擇HTML語言和htmlparser2 。
我們為JavaScript / Typescript解析器使用recast 。在此庫的原始實施時， acorn是唯一可以正確寫入HTML的主要解析器。我們首先嘗試了橡子，但無法採用它，因為橡子忽略了評論。我們還想支持打字稿，因此我們最終選擇了recast 。我們還將JavaScript解析為打字稿。這是因為打字稿是JavaScript的超集。
要查看通過recast的ASTS，請在AST Explorer中選擇JavaScript語言和recast 。然後按配置按鈕，然後選擇typescript作為解析器。
我們為CSS / SCSS解析器使用postcss 。
要查看PostCSS解析的AST，請在AST Explorer中選擇CSS和postcss 。
Vue Service Bay可以與任何語言一起用於不需要AST操縱的遷移。但是，如果您使用的是AST，目前支持以下語言。如果您想增加對其他語言的支持，請隨時提交PR。
<template><Script><Style>我們始終對問題開放並提出請求。您的貢獻有助於使Vueservicebay成為每個人的更好工具。
儘管我們歡迎問題並提取請求，但積極的維護時間是有限的。如果您有功能請求或需要進行大量更改，則強烈建議提交拉動請求。
