Vue 3 continua a guadagnare terreno nel mondo dello sviluppo web. Con il suo approccio moderno alla reattività dei dati, la composizione dei comportamenti dei componenti e molte altre funzionalità, Vue 3 dovrebbe avere questo tipo di attenzione. L'unico aspetto di Vue che necessita di un po' di aiuto sono gli strumenti per l'area di lavoro aziendale. È qui che lo strumento monorepo di Nrwl, Nx, potrebbe entrare e potenziare qualsiasi ambiente Vue!

Il Potere del Monorepo in Nx

Quando si tratta di codice sorgente, sfruttare un "monorepo" è stata anche una tendenza in crescita nell'ecosistema software. Immagina un mondo in cui non è necessario configurare pipeline di compilazione/distribuzione per condividere il codice. La barriera all'ingresso per riutilizzare il codice diventa molto più piccola. La speranza di semplificare la condivisione del codice sblocca il percorso rapido verso la produzione. Non mancano altri motivi per cui una strategia monorepo è attraente, ed è meglio esplorarli per vedere se si adatta alle tue esigenze.

Questo non vuol dire che i monorepos siano una vittoria gratuita, poiché possono sorgere problemi e inefficienze. Uno strumento robusto e testato in battaglia aiuta a risolvere questi problemi e Nx è quello strumento .

Nx fornisce un'architettura robusta per la generazione di codice applicando stili e limiti di codifica attraverso il monorepo ed estendendo Nx per quei casi d'uso unici. Soprattutto, il passaggio a un monorepo è un'esperienza per sviluppatori altrettanto fluida (o spesso molto migliore) rispetto alla gestione di basi di codice separate.

Iniziare con Vite

Questo articolo si concentra su un'app Vue 3 in un monorepo Nx utilizzando Vite . In generale, è meglio migrare a Vite poiché Vue CLI è deprecato .

VueSchool ha un fantastico articolo per migrare a Vite ; controlla! Come consiglio rapido: la parte più difficile della migrazione da Webpack a Vite potrebbe essere trovare dipendenze compatibili con Vite o capire la giusta configurazione del plug-in Vite per supportare le dipendenze di terze parti esistenti.

Un'altra cosa: la versione 16 di Nx ha introdotto nuovi pacchetti con ambito ( @nx/). Questa è una modifica sostanziale per i plug-in esistenti, quindi ci concentreremo sull'ultima versione 15. Ci saranno aggiornamenti a questo articolo quando le modifiche saranno implementate.

Plugin chiave di Vue che vale la pena considerare

Nx fornisce supporto di prima parte per molti framework frontend e backend. Tuttavia, non supportano ancora ufficialmente Vue. Fortunatamente, Vue ha una forte comunità open source che ha già sviluppato il supporto Nx!

Al momento della scrittura, ci sono due plugin che vale la pena esaminare: nx-vue3-vitee @nxext/vue. Ci sono alcuni pro e contro nell'usare entrambi i plugin. Entrambi hanno un supporto attivo. Entrambi forniscono la generazione del codice del progetto dell'applicazione e della libreria. Entrambi hanno il proprio esecutore testamentario Vite ma si stanno attivamente spostando verso l'esecutore testamentario di prima parte di Nx. Le differenze sono:

• @nxext/vuenon è la produzione pronta al momento della stesura di questo articolo. Per renderlo pronto per la produzione, la comunità attorno a questo plug-in vuole garantire che i generatori soddisfino un livello base di esigenze e che i progetti vengano generati con l'esecutore Vite di Nx.
• nx-vue3-viteha un approccio fortemente supponente verso la generazione del codice dell'applicazione. Questo plugin genera l'installazione di Vuex e Cypress come parte della creazione del progetto dell'applicazione. Potrebbe non essere una grande truffa se ci fossero piani per utilizzare queste dipendenze.

Nel complesso, tuttavia, poiché sempre più persone adottano Vue e desiderano utilizzarlo in un monorepo Nx, è più probabile che questi problemi vengano risolti. Usare uno di questi plugin è meglio che provare a partire dal nulla poiché elaborare strategie di generazione del codice è difficile.

Questi plugin daranno il via a qualsiasi progetto.

Nx Monorepo e Vue: dai vita alla tua app, passo dopo passo

Lavoreremo da un nuovo spazio di lavoro Nx, creeremo un'applicazione Vue, configureremo il progetto da utilizzare @nx/vitee infine copieremo un progetto esistente nell'applicazione appena creata. I passaggi sono indicati nei documenti Nx .

Crea l'area di lavoro

Per iniziare, crea un'area di lavoro vuota con il seguente comando:

npx create-nx-workspace@15

Una volta che Nx ha finito di configurare l'area di lavoro iniziale, installa nx-vue3-vite, @nrwl/jest@15, @nrwl/vite@15. Poiché @nxext/vuela produzione non è ancora pronta, ci concentreremo su nx-vue3-vite.

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

Generare un'app è abbastanza semplice. Concettualmente, esegui la funzione che vuoi usare per generare codice, in Nx lo chiamiamo generatore. Useremo il generatore chiamato vue3-viteda nx-vue3-vite. Esegui il generatore con il seguente comando:

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

Per riferimento futuro, Nx può presentare prompt ogni volta che si genera codice. Questo dipende dal generatore che stai usando. Eventualmente vue3-vite, tutte le opzioni richieste vengono soddisfatte fornendo il nome dell'applicazione.

A questo punto, supponendo che tu non disponga di un'applicazione Vue esistente, sei pronto per iniziare a creare la tua app Vue!

Usa l'implementazione Vite di Nx

È semplice passare all'esecutore testamentario ufficiale di Vite di Nx. Apri la project.jsondirectory dell'app e trova quanto segue:

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

L'altra modifica da apportare è servesostituire all of servecon quanto segue:

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

Ora questa applicazione sta usando @nrwl/vite!

Sostituire l'applicazione

Questa parte è abbastanza semplice, soprattutto perché la tua applicazione è già su Vite. Tutto quello che devi fare ora è unire la tua app esistente in questa nuova directory e aggiornarla package.jsoncon le tue dipendenze. A seconda del progetto, potrebbe essere necessario aggiornare i riferimenti al percorso project.jsonper rappresentare ciò che è vero. Questo è interamente basato sulla tua applicazione.

Che dire @nxext/vue?

@nxext/vuecondivide la maggior parte degli stessi passaggi per la configurazione (installazione delle dipendenze, generazione dell'app, passaggio all'implementazione Vite di Nx e copia dell'app esistente) solo che farai riferimento alla documentazione per @nxext/vue. I futuri miglioramenti del plug-in potrebbero non richiedere l'aggiornamento di project.jsonperché sta già utilizzando @nrwl/vite.

Conclusione

Nx ha un'architettura robusta che deve solo essere informata su come utilizzare i nuovi strumenti. Rendere Vue utilizzabile ed estensibile in un monorepo Nx lo dimostra. Ciò è reso più semplice in quanto Vite è un plug-in di prima parte. Man mano che Vue diventa più popolare, saranno disponibili plug-in più robusti per semplificare la generazione di applicazioni e librerie.

Questo mi fa pensare: quali altri framework possono ora essere configurati in questo monorepo?

Forse la prossima volta dovremmo provare AngularJS.

Informazioni su HeroDev

HeroDevs è uno studio di consulenza e ingegneria del software specializzato nello sviluppo front-end. Il nostro team è autore o coautore di progetti come Angular CLI, Angular Universal, Scully, XLTS: supporto esteso a lungo termine per AngularJS, Vue2, Protractor e molti altri. Lavoriamo con startup in rapida crescita e alcune delle più grandi aziende del mondo come Google, GE, Capital One, Experian, T-Mobile, Corteva e altre. Scopri di più su di noi su herodevs.com .