Начните свой проект Vue правильно: некоторые ключевые шаги по созданию приложения в Nx Monorepo

Vue 3 продолжает набирать обороты в мире веб-разработки. Благодаря современному подходу к реактивности данных, составлению поведения компонентов и многим другим функциям Vue 3 заслуживает такого внимания. Единственный аспект Vue, который нуждается в небольшой помощи, — это инструменты корпоративного рабочего пространства. Именно здесь может помочь монорепозиторий Nrwl, Nx, и перегрузить любую среду Vue!

Сила монорепозитория в Nx

Когда дело доходит до исходного кода, использование «монорепо» также стало растущей тенденцией в программной экосистеме. Представьте себе мир, в котором нет необходимости настраивать конвейеры сборки/развертывания для обмена кодом. Барьер входа для повторного использования кода становится намного меньше. Надежда на упрощение обмена кодом открывает быстрый путь к производству. Нет недостатка в других причинах привлекательности стратегии монорепозитория, и лучше изучить их, чтобы понять, соответствует ли она вашим потребностям.

Это не значит, что монорепозитории — это бесплатная победа, поскольку могут возникнуть проблемы и неэффективность. Надежный, проверенный на практике инструмент помогает решить эти проблемы, и Nx как раз является таким инструментом.

Nx обеспечивает надежную архитектуру для генерации кода, применяя стили кодирования и границы в монорепозитории и расширяя Nx для этих уникальных вариантов использования. Лучше всего то, что переход на монорепозиторий является таким же беспрепятственным (а часто и намного лучшим) опытом разработчика, чем когда-либо было управление отдельными базами кода.

Начало работы с Вите

Эта статья посвящена приложению Vue 3 в монорепозитории Nx с использованием Vite. Как правило, лучше всего перейти на Vite, так как Vue CLI устарел.

У VueSchool есть фантастическая статья о переходе на Vite; проверить это! Небольшой совет: самой сложной частью перехода с Webpack на Vite может быть поиск зависимостей, совместимых с Vite, или определение правильной конфигурации плагина Vite для поддержки существующих сторонних зависимостей.

Еще одна вещь: Nx версии 16 представила новые пакеты с областью действия (@nx/). Это критическое изменение для существующих плагинов, поэтому мы сосредоточимся на последней версии 15. По мере внесения изменений эта статья будет обновляться.

Плагины Key Vue, о которых стоит подумать

Nx обеспечивает собственную поддержку множества интерфейсных и серверных фреймворков. Однако они пока официально не поддерживают Vue. К счастью, у Vue есть сильное сообщество разработчиков открытого исходного кода, которое уже разработало поддержку Nx!

На момент написания заслуживают изучения два плагина: nx-vue3-vite и @nxext/vue. Есть некоторые плюсы и минусы использования любого плагина. Оба имеют активную поддержку. Оба они обеспечивают генерацию кода проекта приложения и библиотеки. У них обоих есть собственный исполнитель Vite, но они активно переходят на собственный исполнитель Nx. Различия:

  • @nxext/vue не готово к производству на момент написания этой статьи. Чтобы подготовить его к работе, сообщество вокруг этого плагина хочет, чтобы генераторы соответствовали базовому уровню потребностей, а проекты генерировались с помощью исполнителя Nx Vite.
  • nx-vue3-vite придерживается строго самоуверенного подхода к генерации кода приложения. Этот плагин генерирует установку Vuex и Cypress как часть создания проекта приложения. Возможно, это не было бы большой проблемой, если бы планировалось использовать эти зависимости.

Самая большая проблема для любого из этих плагинов — отсутствие поддержки графа зависимостей для файлов Vue. Определение графа зависимостей чрезвычайно важно, поэтому Nx не нужно тратить время на выполнение работы, когда изменение не влияет на проект, но не мешает вам двигаться вперед с Nx.

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

Эти плагины помогут запустить любой проект.

Nx Monorepo и Vue: оживление вашего приложения, шаг за шагом

Мы будем работать в новой рабочей области Nx, создадим приложение Vue, настроим проект на использование @nx/vite и, наконец, скопируем существующий проект во вновь созданное приложение. Шаги указаны в Nx docs.

Создайте рабочее пространство

Для начала создайте пустую рабочую область с помощью следующей команды:

npx create-nx-workspace@15

Пройдите свой путь через процесс настройки вашего рабочего пространства. Я рекомендую для некоторых начальных настроек Integrated workspaces , ts и отключить распределенный кеш (это замечательная функция от Nrwl под названием Nx Cloud, но мы не будем ее здесь описывать).

Как только Nx завершит настройку начальной рабочей области, установите nx-vue3-vite, @nrwl/jest@15, @nrwl/vite@15. Поскольку @nxext/vue еще не готов к производству, мы сосредоточимся на nx-vue3-vite.

npm install -D nx-vue3-vite @nrwl/jest@15 @nrwl/vite@15

Создать приложение

Создать приложение достаточно просто. Концептуально вы выполняете функцию, которую хотите использовать для генерации кода, в Nx мы называем это генератором. Мы собираемся использовать генератор под названием vue3-vite из nx-vue3-vite. Запустите генератор с помощью следующей команды:

npx nx generate nx-vue3-vite:vue3-vite {{nameOfApp}}

{{nameofApp}} может быть любой строкой, которую вы хотите, просто нужно легко ссылаться на будущие выполнения команд, если вы продолжите использовать Nx в терминале. (Примечание: Nrwl создала расширения для Intellij и Visual Studio Code для Nx. Это переносит функциональность CLI в визуальный мир.)

Для дальнейшего использования Nx может отображать подсказки всякий раз, когда вы генерируете код. Это зависит от генератора, который вы используете. В случае vue3-vite все необходимые параметры выполняются путем указания имени приложения.

На данный момент, если у вас нет существующего приложения Vue, вы готовы приступить к созданию своего приложения Vue!

Используйте реализацию Nx Vite

Перейти к официальному исполнителю Vite от Nx очень просто. Откройте project.json в каталоге вашего приложения и найдите следующее:

"build": {
      "executor": "nx-vue3-vite:build-app",
      "options": {
        "dist": "dist/packages/{{nameOfApp}}"
      }
    },

Замените build следующим:

"build": {
      "executor": "@nrwl/vite:build",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "outputPath": "dist/packages/{{nameOfApp}}"
      },
      "configurations": {
        "development": {
          "mode": "development"
        },
        "production": {
          "mode": "production"
        }
      }
    },

Убедитесь, что значение outputPath совпадает со значением dist. {{nameOfApp}} следует заменить на имя приложения.

Другое изменение, которое нужно сделать, это serve, поэтому замените все serve следующим:

"serve": {
      "executor": "@nrwl/vite:dev-server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "{{nameOfApp}}:build"
      },
      "configurations": {
        "development": {
          "buildTarget": "{{nameOfApp}}:build:development",
          "hmr": true
        },
        "production": {
          "buildTarget": "{{nameOfApp}}:build:production",
          "hmr": false
        }
      }
    },

Снова замените {{nameOfApp}} на имя приложения.

Теперь это приложение использует @nrwl/vite!

Заменить приложение

Эта часть достаточно проста, тем более что ваше приложение уже есть на Vite. Все, что вам нужно сделать сейчас, это объединить ваше существующее приложение в этот новый каталог и обновить package.json с вашими зависимостями. В зависимости от вашего проекта вам может потребоваться обновить ссылки на пути в project.json, чтобы представить, что верно. Это полностью основано на вашем приложении.

А как насчет @nxext/vue?

@nxext/vue разделяет большинство тех же шагов по настройке (установка зависимостей, создание приложения, переход на реализацию Nx Vite и копирование существующего приложения), просто вы будете ссылаться на документацию для @nxext/vue. Будущие усовершенствования плагина могут не потребовать от вас обновления project.json, потому что он уже использует @nrwl/vite.

Заключение

Nx имеет надежную архитектуру, которой просто нужно объяснить, как использовать новые инструменты. Это доказывает возможность использования и расширения Vue в монорепозитории Nx. Это стало проще, поскольку Vite — это собственный плагин. По мере того, как Vue становится все более популярным, будут доступны более надежные плагины, упрощающие создание приложений и библиотек.

Это заставляет задуматься: какие еще фреймворки теперь можно настроить в этом монорепозитории?

Может быть, в следующий раз нам стоит попробовать AngularJS.

О HeroDevs

HeroDevs – это студия разработки программного обеспечения и консалтинга, специализирующаяся на разработке интерфейсов. Наша команда является автором или соавтором таких проектов, как Angular CLI, Angular Universal, Scully, XLTS — расширенная долгосрочная поддержка AngularJS, Vue2, Protractor и многих других. Мы работаем с быстрорастущими стартапами и крупнейшими мировыми компаниями, такими как Google, GE, Capital One, Experian, T-Mobile, Corteva и другими. Узнайте больше о нас на herodevs.com.