Nx 15.3 - Progetti autonomi, Vite, Task Graph e altro!

Dec 08 2022

Che enorme rilascio! Ecco tutte le novità Sommario · Finanziamento — Nx raccoglie 8,6 milioni di dollari · 3 milioni di download a settimana · Nuova visualizzazione del grafico delle attività · Progetti autonomi · Il supporto integrato Vite e Vitest è qui! · Adottare Nx non è mai stato così facile · Aggiungere Nx a un progetto autonomo esistente· Script a livello di root· Comandi di esecuzione Nx semplificati· In arrivo· Come aggiornare Nx Preferisci una versione video? Finanziamento: Nx raccoglie $8.

Che enorme rilascio! Ecco tutte le novità

Sommario

· Finanziamenti: Nx raccoglie 8,6
milioni di dollari · 3 milioni di download a settimana
· Nuova visualizzazione del grafico delle attività
· Progetti
indipendenti · Il supporto integrato Vite e Vitest è qui!
· Adottare Nx non è mai stato così facile
· Aggiungere Nx a un progetto autonomo esistente
· Script a livello di root
· Comandi di esecuzione Nx semplificati
· In arrivo
· Come aggiornare Nx

Preferisci una versione video?

Finanziamento: Nx raccoglie 8,6 milioni di dollari

Nel caso te lo fossi perso, abbiamo raccolto 8,6 milioni di dollari un paio di settimane fa. Ecco il post ufficiale sul blog del nostro CEO Jeff:https://blog.nrwl.io/from-bootstrapped-to-venture-backed-nx-raises-8-6m-2ae2228eff76

È entusiasmante per noi dato che ora possiamo avere più dipendenti concentrati sull'avanzamento di Nx e Nx Cloud, il che aumenterà significativamente la velocità di sviluppo!
Per la maggior parte della nostra forza lavoro, lavorare su Nx e Nx Cloud era solo una parte del loro "progetto del 20%". Eppure abbiamo rilasciato fantastiche funzionalità negli ultimi anni e abbiamo registrato un'enorme crescita con Nx (che ci porta alla sezione successiva)

3 milioni di download a settimana

Il 2022 è stato per noi un anno particolarmente folle ma di successo. E la crescita di Nx conferma che siamo sulla strada giusta:

Gennaio: Nx supera 1 milione di download a settimana
Giugno: Nx supera i 2 milioni di download a settimana
Novembre: Nx supera i 3 milioni di download a settimana

Nuova visualizzazione del grafico delle attività

Anche una delle nostre funzionalità più amate è appena diventata più potente: il grafico Nx!

Nx visualizza già il grafico del tuo progetto, mappando le dipendenze che diversi progetti hanno l'uno dall'altro attraverso importazioni ed esportazioni nel tuo codice. Ma anche le tue attività hanno un grafico. Il tuo compito può dipendere da un altro obiettivo sullo stesso progetto, diciamo che hai un prebuild
e un buildobiettivo. Ogni volta che corri build, vuoi correre per prebuildprimo. Allo stesso modo, se il tuo progetto dipende da altri progetti, potresti voler assicurarti di costruirli prima. Questa è chiamata task pipeline e può essere definita nx.jsoncome segue:

// nx.json
{
    ...
    "targetDefaults": {
      "build": {
        "dependsOn": ["prebuild", "^build"]
      }
    }
}

Pertanto, lascia che ti presenti il grafico delle attività . Potresti essere già abituato a vedere il grafico del progetto dopo aver eseguito il nx graphcomando. Ma ora c'è un menu a discesa nell'angolo che ti consente di passare al grafico delle attività. Seleziona un target dal menu a discesa "Nome target" per filtrare l'elenco dei progetti solo per quelli con quel target. Fai clic su un progetto per visualizzare il grafico delle attività di quel target.

Puoi anche aggiungere un altro progetto, mostrando come appare il grafico delle attività per un comando che esegue attività per più progetti come nx run-manyo nx affected. Fare clic sulla Group by projectcasella di controllo per raggruppare le attività correlate in base al progetto e fare clic su un'attività per vedere quale esecutore utilizza.

Progetti autonomi

Nx è ampiamente conosciuto come lo strumento per sviluppatori che le persone guardano quando si tratta di implementare monorepos nello spazio frontend. Tuttavia, molte delle caratteristiche uniche fornite da Nx (in particolare quando si tratta di implementare Integrated Monorepos ) possono essere vantaggiose anche al di fuori del tipico scenario monorepo. In particolare, le funzionalità del plug-in Nx come la generazione del codice, l'impostazione degli strumenti di compilazione preconfigurati e l'integrazione collaudata con gli strumenti delle migliori pratiche (ad es. Cypress, Jest, ESLint, Vite, ...).

Ma uno si distingue in modo più evidente: la capacità di modularizzare facilmente la tua base di codice.

Molti dei nostri utenti adottano Nx proprio per questo motivo. Hanno un'app di grandi dimensioni e vogliono suddividerla in parti più piccole pur avendo la comodità di distribuirla come una singola app.

In 15.3 stiamo quindi rendendo i progetti autonomi una funzionalità di prima classe. Supponiamo ora di creare un nuovo spazio di lavoro con npx create-nx-workspacele solite opzioni monorepo. In tal caso, ora vedrai altre due opzioni per lo scaffolding di un'applicazione React o Angular autonoma (ne aggiungeremo altre in futuro).

In una configurazione di progetto autonoma, non hai la tipica appsstruttura libsa cui potresti essere abituato se hai utilizzato Nx in passato. Invece, l'app vive direttamente alla radice del tuo spazio di lavoro. La struttura è simile alla seguente:

e2e/
  src/
  cypress.config.ts
  project.json
  ...
src/
  app/
  main.tsx
  ...
public/
index.html
project.json
tsconfig.spec.json
tsconfig.app.json
tsconfig.json
vite.config.ts
nx.json                       
package.json

Per modularizzare la tua applicazione, puoi aggiungere librerie come faresti in una configurazione Nx monorepo integrata più tradizionale, ma ora puoi averle insieme alla tua applicazione. Creali direttamente a livello di root o raggruppali in una o più cartelle a livello di root. Nell'esempio seguente, ho una cartella featurescosì come utils, entrambe possono ospitare più librerie.

e2e/
  ...
src/
  app/
  main.tsx
  ...
features/
  feature1/
  feature2/
utils/
  ...
index.html
...
nx.json                       
package.json

Pensalo come uno strumento di sviluppo potenziato, che fornisce potenti generatori, funzionalità come regole di confine del modulo e ovviamente la capacità di eseguire test, linting, costruire su singole librerie. Per non dimenticare la potente capacità di memorizzazione nella cache di Nx. E se sei pronto per un "vero" monorepo perché vuoi aggiungere più applicazioni, ci saranno percorsi per "aggiornare" a quella struttura.

Il supporto integrato Vite e Vitest è qui!

Infine! Ne abbiamo parlato; ora è qui! Supporto ufficiale Vite e Vitest per monorepos integrati basati su Nx e progetti di app standalone! Ciò aggiunge la comunità Vite alla famiglia Nx, e di recente abbiamo chattato con i membri principali e lo adoriamo!

Quindi, prima di addentrarci in questo: se stai utilizzando un monorepo basato su pacchetto con Nx, potresti già utilizzare Vite o qualsiasi altra tecnologia desideri. Nx fa solo la pianificazione delle attività lì, eseguendo i tuoi package.jsonscript in modo efficiente. Qualunque cosa facciano questi script "internamente" dipende da te.

Ma se alimenti una configurazione integrata, vorresti più supporto tramite un plug-in Nx dedicato. E c'è già stato un plug-in della community Nx creato dalla gente dihttps://nxext.dev/. Data l'elevata richiesta di supporto Vite, noi (il core team di Nx) abbiamo iniziato a cercare di creare e mantenere il nostro. Abbiamo contattato Dominik Piper e Jordan Hall del team NxExt ed erano d'accordo fin dall'inizio! Abbiamo ricevuto molti input utili durante la progettazione del nuovo plug-in Vite. Enorme ringraziamento a loro!

@nrwl/vite(proprio come @nrwl/webpack) è un pacchetto che può essere integrato come parte di altri pacchetti. In questo momento, stiamo dando la priorità alla nostra configurazione React. Se generi un nuovo spazio di lavoro Nx e scegli la nuova versione "Standalone React app", otterrai un'applicazione React alimentata da Vite e Vitest.

Allo stesso modo, puoi aggiungere una nuova app React basata su Vite a un'area di lavoro Nx esistente utilizzando l' viteopzione bundler:

npx nx generate @nrwl/react:application --bundler=vite

Reagisci con Vite
Prove con Vitest
Assicurarsi che funzioni bene con TypeScript (sia nei file src che spec)

{
  "name": "viteapp",
  ...
  "projectType": "application",
  "targets": {
    "build": {
      "executor": "@nrwl/vite:build",
      ...
    },
    "serve": {
      "executor": "@nrwl/vite:dev-server",
      "defaultConfiguration": "development",
      ...
    },
    "test": {
      "executor": "@nrwl/vite:test",
      "outputs": ["{projectRoot}/coverage"],
      "options": {
        "passWithNoTests": true
      }
    },
    ...
  }
}

Se stai attualmente utilizzando il plug-in Vite basato su NxExt o anche una configurazione Nx React basata su Webpack, puoi passare facilmente al nuovo plug-in Vite semplicemente eseguendo il seguente generatore:

npx nx g @nrwl/vite:configuration

Puoi anche trovare tutti i dettagli sul nuovo pacchetto Vite sui nostri documenti:https://nx.dev/packages/vite

Adottare Nx non è mai stato così facile

Molti sviluppatori non iniziano necessariamente con un progetto greenfield, ma piuttosto hanno una realtà esistente in cui vogliono utilizzare Nx. Abbiamo migliorato questo processo di adozione di Nx nel corso di quest'anno al punto che non è mai stato così facile come adesso!

Indipendentemente dal fatto che tu abbia

una configurazione monorepo basata su pacchetto esistente che utilizza aree di lavoro NPM/Yarn o PNPM
uno spazio di lavoro Lerna esistente (per questo probabilmente vorrai consultare i documenti di Lerna per alcuni fantastici aggiornamenti delle funzionalità)
un'applicazione Create-React-App (CRA).
un'applicazione autonoma CLI angolare
o davvero qualsiasi altra forma di progetto

npx nx@latest init

Consulta i nostri documenti per tutti i dettagli su

aggiungendo Nx a un monorepo esistente
aggiungendo Nx a qualsiasi configurazione non monorepo
migrando il tuo progetto CRA su Nx
migrare la tua app Angular CLI su Nx

Aggiunta di Nx a un progetto autonomo esistente

Aggiungere Nx a una singola applicazione? Perché sarebbe utile? Bene, la maggior parte delle app ha più script nel proprio package.json, che include la creazione, il test, il linting della tua app e potenzialmente molto altro. Nx può memorizzarli nella cache! Ovviamente si tratta solo di memorizzazione nella cache a livello di app (dal momento che non l'hai modularizzata con le librerie), ma immagina che la tua configurazione CI esegua questi:

npx nx build
npx nx test
npx nx lint
npx nx e2e

Per aggiungere Nx a un progetto autonomo esistente, tutto ciò che devi eseguire è

npx nx@latest init

{
  ...
  "scripts": {
    "build": "nx exec -- vite build",
    "lint": "nx exec -- eslint \"src/**/*.ts*\"",
    ...
    "dev": "vite",
    "start": "vite --open",
  },
  "devDependencies": {
    ...
    "nx": "15.3.0"
  }
}

Script a livello di root

La maggior parte delle attività in un'area di lavoro viene eseguita su un progetto specifico, come la creazione o il test. Ecco perché vivono nel corrispondente package.jsono project.json. Ma a volte hai comandi a livello di area di lavoro che vuoi eseguire attraverso la "pipeline Nx" per ottenere i vantaggi della memorizzazione nella cache.

Supponiamo che tu abbia già uno script chiamato docsnel tuo root-level package.json.

// package.json
{
  "name": "myorg",
  "scripts": {
    "docs": "node ./generateDocsSite.js"
  }
}

// package.json
{
  "name": "myorg",
  "scripts": {
    "docs": "node ./generateDocsSite.js"
  }
  "nx": {}
}

npx nx docs

Leggi di più sui nostri documenti:https://nx.dev/recipes/other/root-level-scripts

Nx comandi di esecuzione semplificati

Nx può rilevare automaticamente i tuoi script in formato package.json. Ma se disponi di una configurazione integrata che utilizza i plug-in Nx, di solito vengono forniti con un'estensione project.json. Lì hai obiettivi come build, test, lintecc. e per lo più hanno il seguente aspetto:

// project.json
{
  "name": "demoapp",
  ...
  "targets": {
    "build": {
      "executor": "@nrwl/vite:build",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "outputPath": "dist/demoapp"
      },
      ...
    },
    "serve": {
      "executor": "@nrwl/vite:dev-server",
      ...
    },
    ...
  }
}

Per aggiungere un comando personalizzato, come invocare uno script del nodo, Nx ha i cosiddetti "comandi di esecuzione" . Finora hai dovuto avvolgere quei comandi come segue:

// project.json
{
  "name": "demoapp",
  ...
  "targets": {
    "prebuild": {
      "executor": "nx:run-commands",
      "options": {
        "command": "echo 'hi'"
       }
    },
    "build": {
      ...
    },
    ...
  }
}

// project.json
{
  "name": "demoapp",
  ...
  "targets": {
    "prebuild": {
      "command": "echo 'hi'"
    },
    "build": {
      ...
    },
    ...
  }
}

Puoi leggere tutto al riguardo sui nostri documenti:https://nx.dev/recipes/executors/run-commands-executor

In arrivo

Wow, che lancio! Ma nelle prossime settimane sono in arrivo altre funzionalità che non ce l'hanno fatta per questa versione. Super entusiasta di questi, che includono in modo più prominente