Познакомьтесь с Vue Service Bay-вашей мощностью для микроподобности для легких, объемных модификаций в компонентах vue.js. Попрощайтесь с утомительным, ручным рефакторингом и ускорите свой конвейер разработки этим легким, но мощным инструментом.
Рефакторинг обычно следует за одним из двух подходов: постепенный или оптовый. Подход, который вы выбираете, зависит от вашего проекта. Например, если вам нужно применить новую систему проектирования на всей вашей кодовой базе одновременно, этот инструмент бесценен. Машины могут выполнять простые задачи намного быстрее и точнее, чем люди. Автоматизация ваших задач рефакторинга с помощью этой библиотеки значительно повысит эффективность и точность. Этот репозиторий предоставляет инструмент для применения такого рефакторирования к компонентам Vue.js.
Следующая блок -схема упрощает взаимодействие между этим хранилищем и вашим рабочим процессом:
Блок -схема LR
подграф Vue Service Bay
v1 [Читать файл vue]-> v2 [раздел по разделу]
v2 [раздел по разделу]-> v3 [parse to ast]
v4 [ast to vue file]
конец
Код подграфа пользователя земли
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 в наших примерах.
Затем вам нужно будет реализовать конкретную миграционную логику. Смотрите наши примеры для более подробной информации:
(Magicsring-это удобный способ внести изменения в ASTS. Для получения дополнительной информации посетите https://github.com/rich-harris/magic-string)
Выполните свой скрипт Migration Runner:
node index.jsASTs сложны и странные для первого зрителя. С другой стороны, если вы можете освоить AST, они могут быть отличным оружием для рефакторинга и других языковых программирования. Здесь мы объясним, как понять AST простым способом.
Во -первых, языки программирования часто рассматриваются как абстрактное синтаксисное дерево (AST) для простоты понимания; AST - это структура данных, широко используемая компиляторами для представления структуры программного кода.
Эта библиотека также использует AST для рефакторинга. Проще говоря, программа превращается в AST, а затем AST снова манипулируется и снова записывается в программу.
К счастью, есть инструменты, чтобы легко понять AST. Это AST Explorer.
Используя AST Explorer, мы можем автоматически перейти к соответствующему AST, нажав куда угодно. Это позволяет легко выяснить информацию о узле, который мы хотим обрабатывать, и его окружающие узлы, включая его родителя.
Наконец, мы объясним, как просматривать AST для каждого языка.
Мы используем htmlparser2 для нашего анализатора HTML. Во время первоначальной реализации этой библиотеки htmlparser2 был единственным основным анализатором, который мог бы правильно написать ASTS в HTML.
Чтобы просмотреть ASTS, проанализированные htmlparser2 , выберите HTML -язык и htmlparser2 в AST Explorer.
Мы используем recast для нашего анализатора JavaScript / TypeScript. Во время первоначальной реализации этой библиотеки acorn был единственным основным анализатором, который мог правильно написать ASTS в HTML. Сначала мы попробовали Acorn, но не смогли его принять, потому что Acorn игнорирует комментарии. Мы также хотели поддержать TypeScript, поэтому мы наконец выбрали recast . Мы также анализируем JavaScript как TypeScript. Это потому, что TypeScript - это суперсет JavaScript.
Чтобы просмотреть ASTS, проанализированные с помощью recast , выберите язык JavaScript и recast в AST Explorer. И нажмите кнопку конфигурации и выберите typescript в качестве анализатора.
Мы используем postcss для нашего анализатора CSS / SCSS.
Чтобы просмотреть ASTS, проанализированные PostCSS , выберите CSS и postcss в AST Explorer.
Vue Service Bay можно использовать с любым языком для миграций, которые не требуют манипулирования AST. Однако, если вы используете AST, в настоящее время поддерживаются следующие языки. Если вы хотите добавить поддержку другим языкам, не стесняйтесь отправлять PR.
<template><Script><Style>Мы всегда открыты для проблем и привлекать запросы. Ваш вклад помогает сделать Vueservicebay лучшим инструментом для всех.
В то время как мы приветствуем проблемы и вытягивают запросы, время активного обслуживания ограничено. Если у вас есть запросы на функции или требуете существенных изменений, настоятельно рекомендуется отправка запроса на вытяжение.
