flyle-io/vue-service-bay

# Vue 服务湾 ## 概述 欢迎使用 Vue 服务湾——您在 Vue.js 组件中进行轻松批量修改的必备微工具。告别繁琐的手动重构，利用这个轻量级但功能强大的工具加速您的开发流程。 ## 动机 重构通常遵循两种方法之一：增量或全面。您选择哪种方法取决于您的项目。例如，如果您需要一次性将新的设计系统应用到整个代码库，这个工具将非常有价值。机器可以比人类更快、更准确地执行简单任务。使用这个库自动化您的重构任务将显著提高效率和准确性。此存储库提供了一个工具，用于将此类重构应用于 Vue.js 组件。 ## 迁移工作原理 以下流程图简化了此存储库与您的流程之间的交互： ``` flowchart LR subgraph Vue Service Bay v1[Read Vue file]-->v2[Split by section] v2[Split by section]-->v3[Parse to AST] v4[AST to Vue file] end subgraph User land's code v3-->u1[Manipulate AST] u1-->v4 end ``` 即使您对操作 AST（抽象语法树）不熟悉，此存储库也提供了大量示例以供您入门。 ## 操场 要尝试此工具，请克隆存储库： ``` git clone git@github.com:flyle-io/vue-service-bay.git cd vue-service-bay npm install cd packages/examples node migration/index.js # 查看迁移结果，请随意！ git difftool ``` ## 使用方法 ### 安装 将 Vue 服务湾作为开发依赖项安装： ``` npm i -D vue-service-bay ``` `-D` 标志将包安装为开发依赖项。 ### 创建迁移运行器文件 首先，您需要创建一个迁移运行器脚本。有关更多详细信息，请参阅我们的示例中的 [index.js](https://github.com/flyle-io/vue-service-bay/tree/main/packages/examples/migration/index.js)。 ### 实现运行器脚本 接下来，您需要实现特定的迁移逻辑。有关更多详细信息，请参阅我们的示例： - [正则表达式示例](https://github.com/flyle-io/vue-service-bay/tree/main/packages/examples/migration/001_RegexpExamples.js) - [AST 示例](https://github.com/flyle-io/vue-service-bay/tree/main/packages/examples/migration/002_AstManipulateExamples.js) - [MagicString 示例](https://github.com/flyle-io/vue-service-bay/tree/main/packages/examples/migration/003_MagicStringExamples.js) （MagicString 是修改 AST 的便捷方式。有关更多信息，请访问 https://github.com/Rich-Harris/magic-string） ### 运行迁移运行器 执行您的迁移运行器脚本： ``` node index.js ``` ## COLUMN：如何有效地阅读 AST AST 对于初学者来说既复杂又奇特。另一方面，如果您能掌握 AST，它们可以成为重构和其他语言处理编程的强大武器。在这里，我们将以简单的方式解释如何理解 AST。 首先，编程语言通常被处理为抽象语法树（AST）以方便理解；AST 是编译器广泛使用的数据结构，用于表示程序代码的结构。 此库也使用 AST 进行重构。简单来说，程序被转换为 AST，然后 AST 被操作并重新写入程序。 幸运的是，有一些工具可以帮助我们轻松理解 AST。 那就是 [AST 探索器](https://astexplorer.net/）。 使用 AST 探索器，我们可以通过点击任何位置自动跳转到相应的 AST。这使得查找我们想要处理的节点及其周围节点（包括其父节点）的信息变得容易。 最后，我们将解释如何查看每种语言的 AST。 ### HTML 我们使用 `htmlparser2` 作为我们的 HTML 解析器。在原始实现此库时，`htmlparser2` 是唯一能够正确将 AST 写回 HTML 的大解析器。 要查看 `htmlparser2` 解析的 AST，请在 AST 探索器中选择 HTML 语言和 `htmlparser2`。 ### JavaScript / TypeScript 我们使用 `recast` 作为我们的 JavaScript / TypeScript 解析器。在原始实现此库时，`acorn` 是唯一能够正确将 AST 写回 HTML 的大解析器。 我们最初尝试了 acorn，但由于 acorn 忽略注释，我们无法采用它。我们还希望支持 TypeScript，所以我们最终选择了 `recast`。 我们还解析 JavaScript 作为 TypeScript。这是因为 TypeScript 是 JavaScript 的超集。 要查看 `recast` 解析的 AST，请在 AST 探索器中选择 JavaScript 语言和 `recast`。然后按配置按钮并选择 `typescript` 作为解析器。 ### CSS / SCSS 我们使用 `postcss` 作为我们的 CSS / SCSS 解析器。 要查看 `PostCSS` 解析的 AST，请在 AST 探索器中选择 CSS 和 `postcss`。 ## 支持的语言 Vue 服务湾可以与任何语言一起使用，进行不需要 AST 操作的迁移。但是，如果您正在使用 AST，以下语言目前得到支持。如果您想添加对其他语言的支持，请随时提交 PR。 ### `