Vue 3 nadal zyskuje na popularności w świecie tworzenia stron internetowych. Dzięki nowoczesnemu podejściu do reaktywności danych, komponowaniu zachowań komponentów i wielu innym cechom, Vue 3 powinien mieć tego rodzaju uwagę. Jedynym aspektem Vue, który potrzebuje trochę pomocy, są narzędzia do pracy w przedsiębiorstwie. Właśnie tam narzędzie Monorepo firmy Nrwl, Nx, może wejść i doładować każde środowisko Vue!

Moc Monorepo w Nx

Jeśli chodzi o kod źródłowy, wykorzystanie „monorepo” jest również rosnącym trendem w ekosystemie oprogramowania. Wyobraź sobie świat, w którym nie ma potrzeby konfigurowania potoków kompilacji/wdrażania w celu udostępniania kodu. Bariera wejścia w celu ponownego użycia kodu staje się znacznie mniejsza. Nadzieja na ułatwienie udostępniania kodu otwiera szybką ścieżkę do produkcji. Nie brakuje innych powodów, dla których strategia monorepo jest atrakcyjna i najlepiej je zbadać, aby sprawdzić, czy pasuje do Twoich potrzeb.

Nie oznacza to, że monorepos są darmową wygraną, ponieważ mogą pojawić się problemy i nieefektywność. Solidne, przetestowane w boju narzędzie pomaga rozwiązać te problemy, a Nx jest tym narzędziem .

Nx zapewnia solidną architekturę do generowania kodu poprzez wymuszanie stylów kodowania i granic w monorepo oraz rozszerzanie Nx dla tych unikalnych przypadków użycia. A co najlepsze, przejście na monorepo jest równie bezproblemowe (lub często znacznie lepsze) dla programistów niż zarządzanie oddzielnymi bazami kodu, jakie kiedykolwiek było.

Pierwsze kroki z Vitem

Ten artykuł koncentruje się na aplikacji Vue 3 w monorepo Nx przy użyciu Vite . Ogólnie rzecz biorąc, najlepiej jest przeprowadzić migrację do Vite, ponieważ Vue CLI jest przestarzałe .

VueSchool ma fantastyczny artykuł do migracji do Vite ; Sprawdź to! Krótka wskazówka: najtrudniejszą częścią migracji z Webpack do Vite może być znalezienie zależności zgodnych z Vite lub znalezienie odpowiedniej konfiguracji wtyczki Vite do obsługi istniejących zależności innych firm.

Kolejna rzecz: Nx w wersji 16 wprowadził nowe pakiety z zakresem ( @nx/). Jest to przełomowa zmiana dla istniejących wtyczek, więc skupimy się na najnowszej 15 wersji. Po wdrożeniu zmian ten artykuł będzie aktualizowany.

Kluczowe wtyczki Vue, które warto rozważyć

Nx zapewnia własne wsparcie dla wielu frameworków frontendowych i backendowych. Jednak oficjalnie nie obsługują jeszcze Vue. Na szczęście Vue ma silną społeczność open source, która już rozwinęła obsługę Nx!

W chwili pisania tego tekstu istnieją dwie wtyczki warte zbadania: nx-vue3-vitei @nxext/vue. Istnieje kilka zalet i wad korzystania z dowolnej wtyczki. Obaj mają aktywne wsparcie. Oba zapewniają generowanie kodu projektu aplikacji i biblioteki. Obaj mają swój własny executor Vite, ale aktywnie przechodzą na executor pierwszej strony Nx. Różnice są następujące:

• @nxext/vuenie jest gotowy do produkcji w momencie pisania tego artykułu. Aby była gotowa do produkcji, społeczność skupiona wokół tej wtyczki chce mieć pewność, że generatory spełniają podstawowy poziom potrzeb i że projekty są generowane za pomocą executora Nx Vite.
• nx-vue3-vitema mocno ugruntowane podejście do generowania kodu aplikacji. Ta wtyczka generuje konfigurację Vuex i Cypress w ramach tworzenia projektu aplikacji. Być może nie byłoby to dużym oszustwem, gdyby istniały plany wykorzystania tych zależności.

Ogólnie rzecz biorąc, im więcej osób adoptuje Vue i chce używać go w monorepo Nx, tym bardziej prawdopodobne jest, że problemy te zostaną rozwiązane. Korzystanie z którejkolwiek z tych wtyczek jest lepsze niż próba rozpoczęcia od zera, ponieważ wymyślanie strategii generowania kodu jest trudne.

Te wtyczki wprawią w ruch piłkę w każdym projekcie.

Nx Monorepo i Vue: wdrażanie aplikacji krok po kroku

Będziemy pracować z nowego obszaru roboczego Nx, stworzymy aplikację Vue, skonfigurujemy projekt do użycia @nx/vite, a na koniec skopiujemy istniejący projekt do nowo utworzonej aplikacji. Odwołania do tych kroków znajdują się w dokumentacji Nx .

Utwórz obszar roboczy

Aby rozpocząć, utwórz pusty obszar roboczy za pomocą następującego polecenia:

npx create-nx-workspace@15

Gdy Nx zakończy konfigurowanie początkowego obszaru roboczego, zainstaluj nx-vue3-vite, @nrwl/jest@15, @nrwl/vite@15. Ponieważ @nxext/vueprodukcja nie jest jeszcze gotowa, skupimy się na nx-vue3-vite.

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

Generowanie aplikacji jest dość łatwe. Koncepcyjnie wykonujesz funkcję, której chcesz użyć do wygenerowania kodu, w Nx nazywamy to generatorem. Zamierzamy użyć generatora o nazwie vue3-vitefrom nx-vue3-vite. Uruchom generator za pomocą następującego polecenia:

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

Na przyszłość Nx może wyświetlać monity za każdym razem, gdy generujesz kod. Zależy to od używanego generatora. W vue3-viteprzypadku spełnienia wszystkich wymaganych opcji należy podać nazwę aplikacji.

W tym momencie, zakładając, że nie masz istniejącej aplikacji Vue, możesz przystąpić do tworzenia aplikacji Vue!

Użyj implementacji Nx Vite

Przejście do oficjalnego executora Nx Vite jest proste. Otwórz project.jsonw katalogu aplikacji i znajdź następujące elementy:

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

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

Inną zmianą, którą należy wprowadzić, jest servezastąpienie wszystkich servenastępujących elementów:

"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
        }
      }
    },

Teraz ta aplikacja jest używana @nrwl/vite!

Wymień aplikację

Ta część jest dość prosta, zwłaszcza że Twoja aplikacja jest już na Vite. Wszystko, co musisz teraz zrobić, to scalić istniejącą aplikację z tym nowym katalogiem i zaktualizować ją package.jsono swoje zależności. W zależności od projektu może być konieczne zaktualizowanie odwołań do ścieżek w project.jsoncelu przedstawienia tego, co jest prawdziwe. Jest to całkowicie oparte na Twojej aplikacji.

co z @nxext/vue?

@nxext/vuedzieli większość tych samych kroków konfiguracji (instalacja zależności, generowanie aplikacji, przejście na implementację Nx Vite i kopiowanie istniejącej aplikacji), po prostu będziesz odwoływać się do dokumentacji@nxext/vue . Przyszłe ulepszenia wtyczki mogą nie wymagać aktualizacji, project.jsonponieważ już używa @nrwl/vite.

Wniosek

Nx ma solidną architekturę, którą trzeba tylko nauczyć, jak korzystać z nowych narzędzi. Uczynienie Vue użytecznym i rozszerzalnym w monorepo Nx pokazuje to. Jest to łatwiejsze, ponieważ Vite jest wtyczką własnej firmy. W miarę jak Vue staje się coraz popularniejsze, dostępne będą bardziej niezawodne wtyczki ułatwiające generowanie aplikacji i bibliotek.

To sprawia, że ​​​​zastanawiam się: jakie inne frameworki można teraz skonfigurować w tym monorepo?

Może następnym razem powinniśmy spróbować AngularJS.

O HeroDevs

HeroDevs to studio inżynierii oprogramowania i konsultingu, które specjalizuje się w tworzeniu front-endu. Nasz zespół jest autorem lub współautorem projektów, takich jak Angular CLI, Angular Universal, Scully, XLTS — rozszerzone długoterminowe wsparcie dla AngularJS, Vue2, Protractor i wielu innych. Współpracujemy z szybko rozwijającymi się startupami i niektórymi z największych światowych firm, takich jak Google, GE, Capital One, Experian, T-Mobile, Corteva i innymi. Dowiedz się więcej o nas na herodevs.com .