Alimama создала новый инструмент, который поможет вам изменить код Vue2 на Vue3.

внешний интерфейс Vue.js
Alimama создала новый инструмент, который поможет вам изменить код Vue2 на Vue3.

Vue3 уже давно отсутствует, и многие друзья уже прочитали документацию, написали несколько демонстраций и давно жаждут новых функций, таких как Composition API. К сожалению, в практической работе большинству моих друзей до сих пор приходится жить с тысячами строк старых проектов Vue 2. Делать апгрейд фреймворка — это как ремонт старого дома — идей всегда в избытке, а решимости всегда не хватает.

На самом деле, команда Vue максимально свела к минимуму критические обновления, а также предоставила подробнуюРуководство по миграции, есть довольно много, но если вы посмотрите внимательно, большинство из них являются ручной работой, а некоторые очень просты. Например, асинхронный компонент должен быть завернут дополнительному слою:

image.pngНекоторые из них изменятся немного, например, переименование жизненного цикла пользовательской инструкции и некоторые незначительные изменения во входящих параметрах:

image.png

Увидев такого рода изменения, как программист, который ненавидит повторения, я уже начал думать о том, могу ли я написать код, который поможет нам изменить эти правила в пакетном режиме.Конечно, гораздо сложнее написать код для преобразования кода чем писать веб-страницы.К счастью, у нас уже есть удобный инструмент:GoGoCode.

Наши предыдущие статьи«Новый инструмент Alimama избавляет от необходимости пакетной модификации кода проекта»Он был представлен как более простой инструмент обработки AST, который может значительно упростить написание логики преобразования.

Итак, мы разобралисьРуководство по миграцииКак упоминалось выше, есть некоторые изменения API с обновлением vue-router\vuex.GoGoCodeНаписал около 30 частей логики преобразования, охватывающих большинство сцен изменения кода с Vue2 на Vue3, эта программа может помочь вам преобразовать код Vue2 в код Vue3 одним щелчком мыши.

При сравнении различий между двумя Vue2 и Vue3, упомянутыми выше, код Vue3 справа напрямую отличается от исходного кода Vue2 слева с помощью этого инструмента, и эффект неплохой ^_^, давайте попробуем это вместе!

попытайся

Установить gogocode-cli глобально

npm install gogocode-cli -g

Перейдите к пути проекта Vue, который необходимо обновить в терминале. Если вам нужно обновить код Vue по пути src, выполните следующую команду

gogocode -s ./src -t gogocode-plugin-vue -o ./src-out

После завершения операции преобразования VUE3 новый код записан в каталог SRC-OUT

Берем официальный образец проекта Vue2vue-hackernews-2.0Я попробовал это и обнаружил, что на основе преобразования нужно только внести небольшое изменение, а затем изменить процесс сборки для запуска.Некоторые преобразованные Diff выглядят следующим образом: (Посмотреть полную разницу)

image.png

image.png

Это всего лишь краткое введение. Полное решение см. по адресу:Документация

Гораздо проще реализовать, чем ожидалось

В целях преобразования,GoGoCodeДобавлена ​​поддержка анализа файлов .vue, мы можем легко получить проанализированный шаблон и узлы AST, а также использовать удобный API GoGoCode для обработки.

Некоторые простые правила, такие как представленное выше асинхронное преобразование компонентов, можно напрямую заменить аналогичными строками.Поскольку он основан на AST, нет необходимости заботиться о формате кода, а рабочая нагрузка очень мала:

script
  .replace('() => import($_$)', 'Vue.defineAsyncComponent(() => import($_$))')
  .replace(
    `
      () => ({
        component: import($_$1),
        $$$
      })`,
    `
    Vue.defineAsyncComponent({
      loader: () => import($_$1),
      $$$
    })
      `
  );

В этом проекте также проверялась обработка GoGoCode сложных ситуаций, таких как изменения в жизненном цикле пользовательских инструкций, упомянутых ранее, и это легко сделать!

Открытый исходный код, надеюсь получить ваши отзывы

Я надеюсь, что эти работы могут внести некоторый вклад в сообщество Vue с открытым исходным кодом, чтобы сообщество могло как можно скорее насладиться техническими дивидендами, принесенными Vue3, а также позволить членам команды Vue полагаться на историческое бремя Vue2. и больше сосредоточьтесь на новых функциях разработки Vue3! В начале проекта надеюсь получить от всех отзывы и помощь по недостаткам:

issues: GitHub.com/thx/gogo код…

Группа DingTalk: 34266233

Наконец: попросите звездной поддержки!

Гитхаб:GitHub.com/thx/gogo код…(Этот проект находится в каталоге packages/gogocode-plugin-vue/)

Официальный сайт:gogocode.io

Приложение: Текущие правила преобразования перекрываются

правило Поддержка преобразования Документация
Массив ссылок в v-for ✔ Связь
Асинхронные компоненты ✔ Связь
атрибут обеспечивает поведение ✔ Связь
$attrs содержит класс и стиль ✔ Связь
$children ✖️ Связь
пользовательская директива ✔ Связь
взаимодействие с пользовательским элементом Преобразование не требуется Связь
Опция данных ✔ Связь
испускает опцион ✔ Связь
API событий ✔ Связь
фильтр ✔ Связь
Фрагмент ✔ Связь
функциональные компоненты ✔ Связь
Глобальный API ✔ Связь
Глобальное дерево API ✔ Связь
Встроенный атрибут шаблона ✖️ Связь
keyattribute ✔ Связь
ключевой модификатор ✔ Связь
удалить $слушателей ✔ Связь
Изменения API монтирования ✔ Связь
propsData В разработке Связь
получить доступ к этому в функции по умолчанию опоры Преобразование не требуется Связь
API функции рендеринга ✔ Связь
слот единство ✔ Связь
Suspense Преобразование не требуется Связь
Изменение имени класса перехода ✔ Связь
Переход как корень В разработке Связь
Корневой элемент группы переходов ✔ Связь
Удалить модификатор v-on.native ✔ Связь
v-model ✔ Связь
Сравнение приоритетов между v-if и v-for ✔ Связь
поведение слияния v-bind ✔ Связь
События жизненного цикла VNode В разработке Связь
Watch on Arrays ✔ Связь
vuex ✔ Связь
vue-router ✔ Связь
Категории