Nx 16 jest tutaj!

May 03 2023
Z dumą ogłaszamy wydanie Nx w wersji 16! W tym artykule omówimy najważniejsze aktualizacje z Nx 16 i najważniejsze informacje, które musisz znać, aby poznać zmiany, które przynosi Nx 16! Ale zanim przejdziemy do nowych funkcji Nx 16, podsumujmy niektóre z ostatnich funkcji z naszych pomniejszych wydań Nx 15! · Oto jak przeprowadzić aktualizację za pomocą Nx Migrate· Zmiana zakresu z @nrwl/* na @nx/*· Samodzielne aplikacje Deno, wdrażanie brzegowe i nie tylko· Testowanie funkcji Cypress· Graf zadań· Nx Repo przełącza się na PNPM dla swojego menedżera pakietów· Dowiedz się więcej Oto jak zaktualizować za pomocą Nx Migrate Podobnie jak w przypadku wszystkich nowych wydań Nx, nx migrate może być używany do podbijania pakietów Nx do odpowiedniej wersji, a także do uruchamiania wszelkich niezbędnych zmian w bazie kodu. Aby zaktualizować do Nx 16, uruchom Jeśli dostępne są dalsze migracje, zobaczysz migracje.

Z dumą ogłaszamy wydanie Nx w wersji 16! W tym artykule omówimy najważniejsze aktualizacje z Nx 16 i najważniejsze informacje, które musisz znać, aby poznać zmiany, które przynosi Nx 16!

Ale zanim przejdziemy do nowych funkcji Nx 16, podsumujmy niektóre z ostatnich funkcji z naszych pomniejszych wydań Nx 15!

  • Wprowadziliśmy prostsze ustawienia dla aplikacji startowych React, Angular i Node
  • Dodaliśmy oficjalne wsparcie dla Vite i Vitest dla zintegrowanych monoreposów Nx
  • Wprowadziliśmy oficjalną wtyczkę Deno , w tym integrację dla kolokacji projektów Node i Deno oraz obsługę wykresów projektu dla importu Deno
  • Dodaliśmy Rust do bazy kodu Nx, aby przyspieszyć podstawową funkcjonalność
  • Dodaliśmy obsługę obszarów roboczych innych niż npm, aby wspierać obszary robocze skoncentrowane na innych językach, takich jak C#, Java i Kotlin, i widzieliśmy niektóre z nich w akcji z wtyczkami społeczności dla .NET i Java/Kotlin
  • Wprowadzono konsolę Nx dla środowisk IDE JetBrains, takich jak IntelliJ i WebStorm
  • Oddzieliliśmy wersję Nx od wersji Angular, umożliwiając aktualizację Nx bez aktualizacji Angular

· Oto jak dokonać aktualizacji za pomocą Nx Migrate
· Zmiana zakresu z @nrwl/* na @nx/*
· Samodzielne aplikacje Deno, wdrażanie brzegowe i nie tylko
· Testowanie funkcji Cypress
· Graf zadań
· Nx Repo przełącza się na PNPM dla swojego menedżera pakietów
· Dowiedz się więcej

Oto jak dokonać aktualizacji za pomocą Nx Migrate

Podobnie jak w przypadku wszystkich nowych wydań Nx, nx migratemoże być używany do podbijania pakietów Nx do odpowiedniej wersji, a także do uruchamiania wszelkich niezbędnych zmian w bazie kodu.

Aby zaktualizować do Nx 16, uruchom

nx migrate latest

Jeśli dostępne są dalsze migracje, zobaczysz migrations.jsonplik w katalogu głównym obszaru roboczego. Ten plik zawiera opis wszelkich dalszych skryptów generowania kodu, które należy uruchomić. Aby je uruchomić, użyj polecenia ..

nx migrate --run-migrations

Po uruchomieniu migracji powinny być widoczne w narzędziach kontroli źródła. Upewnij się, że wszystko nadal działa poprawnie, uruchamiając skonfigurowane automatyczne testy.

Sprawdź ten rzeczywisty przykład za pomocą nx migratepolecenia dla repozytorium Tanstack/query:

Również jako przypomnienie dla naszych użytkowników Angular — oddzieliliśmy teraz wersję Nx od wersji Angular , więc dopóki korzystasz z wersji LTS Angular, możesz przejść na najnowszą wersję Nx bez konieczności dotykania Twoja wersja Angulara! W tym celu koniecznie skorzystaj z interactiveopcji (np nx migrate --interactive. ). Sprawdź ten film, aby uzyskać więcej informacji:

Zmiana zakresu od @nrwl/* do @nx/*

Jedną z bardziej znaczących zmian w Nx 16 jest zmiana zakresu npm, w którym publikujemy nasze pakiety, z @nrwlna @nx. Innymi słowy, @nrwl/reactzostanie teraz opublikowany jako @nx/react.

Nx automatycznie obsłuży tę migrację za pomocą nx migratepolecenia aktualizacji obszarów roboczych!

Aby upewnić się, że wtyczki społecznościowe nie są zepsute, @nrwl/*wersje tych pakietów są przestarzałe, ale będą nadal publikowane do dnia Nx 17, który jest zaplanowany na październik 2023 r.

I jeśli chcesz, możesz sprawdzić dokumenty w celu uzyskania dalszych szczegółów!

Samodzielne aplikacje Deno, wdrażanie brzegowe i nie tylko

Nx od jakiegoś czasu obsługuje tworzenie backendów opartych na węzłach. Był to popularny wybór do budowania BFF w konfiguracji opartej na monorepo wraz z aplikacją React lub Angular. W Nx 15.7 zdecydowaliśmy się rozszerzyć to wsparcie i naprawdę zagłębić się w poprawę ogólnego DX.

Deno zyskał sporo miłości w tej iteracji:

  • Obsługa autonomicznej aplikacji — możesz teraz stworzyć rusztowanie dla nowego obszaru roboczego Deno z pojedynczym projektem za pomocą Nx. Po prostu biegnij npx create-nx-workspace --preset=@nx/deno. Prawdopodobnie najszybszy sposób na rozpoczęcie pracy z Deno
  • Dodaliśmy również generatory Nx, aby skonfigurować Deno z dębem . Po prostu przekaż --frameworkopcję podczas konfigurowania nowej aplikacji Deno (lub użyj konsoli Nx )
  • stworzył zupełnie nowy @nx/netlifypakiet (obecnie w laboratoriach ), który pozwala skonfigurować zupełnie nowy projekt do rozwijania i rozpowszechniania funkcji Netlify lub możesz dodać obsługę wdrażania bezserwerowego do istniejącego projektu, używając generatora @nx/netlify:setup-serverless. Sprawdź nasz szczegółowy przepis na ten temat:https://nx.dev/recipes/deployment/node-serverless-functions-netlify
  • opublikowano na nowo @nx/aws-lambdaw celu wdrożenia funkcji Lambda do AWS. Wszystkie szczegóły w naszym najnowszym przepisie:https://nx.dev/recipes/deployment/node-aws-lambda
  • Ulepszyliśmy nasz istniejący pakiet Deno, dodając obsługę wdrażania bezserwerowego zarówno do Deno Deploy , jak i Netlify . Taką obsługę można dodać do istniejącej aplikacji za pomocą @nx/deno:setup-serverlessgeneratora i udostępniając --platformflagę wskazującą na deno-deploylub netlify.

Nx konfiguruje testy e2e dla aplikacji, które mają tendencję do zbierania wielu funkcji. To kończy się jako duży pakiet atomowy, którego Nx nie jest dobry w oddzielaniu. Dzięki Nx 16 ułatwiliśmy dystrybucję tych testów bliżej rzeczywistej funkcji, którą testują. To znacznie ułatwi nx affectedokreślenie, które testy są faktycznie konieczne.

Miałem też okazję prowadzić transmisję na żywo z Calebem z Nx (który kierował większością prac nad tą funkcją), a także z Jordanem Powellem z Cypress, który również przyczynił się do tego przedsięwzięcia — zobaczcie:

Wykres zadań

Nx 16.0 wprowadza również bardziej przydatne narzędzia do wizualizacji projektu i wykresu zadań, zgodnie z ustaleniami Nx:

W szczególności wykres zadań jest pomocny w wizualizacji tego, co faktycznie działa, gdy uruchamiasz polecenia, a dzięki Nx 16.0 możesz teraz użyć tej --graphopcji podczas uruchamiania większości poleceń Nx, aby zwizualizować wykres zadań, które zostałyby uruchomione - na przykład:

nx build react --graph

Nx Repo przełącza się na PNPM dla swojego Menedżera pakietów

Wewnętrznie repozytorium Nx przełączyło się na używanie go pnpmjako menedżera pakietów. Od czasu zmiany zauważyliśmy następujące zalety:

  • publikowanie jest 2x szybsze
  • Zmniejszył się czas CI
  • skrócił się czas instalacji

Podsumowanie!

To tyle w przypadku Nx 16.0 — bardzo nam się spodobała możliwość udostępnienia wam wszystkich tych fajnych rzeczy i nie możemy się doczekać, aby rozpocząć kolejną iterację, skupiając się stale na uczynieniu z Nx niesamowitego narzędzia do zwiększania produktywności poprzez wykorzystanie wszystkich zadania związane z zarządzaniem repo poza równaniem, dzięki czemu możesz skupić się na wysyłaniu świetnych rzeczy.

Ucz się więcej

  • Dokumenty Nx
  • ‍ Nx GitHub
  • Slack społeczności Nx
  • Kanał Nx na Youtube
  • Przyspiesz swoją CI