与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成为每个人的更好工具。
尽管我们欢迎问题并提取请求，但积极的维护时间是有限的。如果您有功能请求或需要进行大量更改，则强烈建议提交拉动请求。
