Alla ricerca di un modo per gestire le dipendenze dei file Javascript

Sulla base del chiarimento, potresti parlare della gestione dei pacchetti JavaScript. I due grandi che conosco sono Node Package Manager (NPM) e Bower. VisualStudio ha l'integrazione di Bower, quindi potrebbe essere una buona corrispondenza per te.

I gestori di pacchetti JavaScript tengono traccia delle dipendenze tra le tue dipendenze, in modo che quando includi qualcosa come KendoUI, il gestore di pacchetti scaricherà e integrerà tutte le dipendenze di cui ha bisogno.

Ciò che molti siti Web fanno in questi giorni è creare una versione consolidata e minimizzata del JavaScript. Ci sono alcuni modi per farlo, a seconda di come vuoi gestirlo.

Asp.Net MVC 5 ha il concetto di creare pacchetti di risorse che riduce il numero di risorse che il browser deve scaricare e le dimensioni della risorsa. Non sono a conoscenza di quanto MVC sia in grado di rimuovere il codice che non viene mai chiamato, ma questo processo funziona piuttosto bene.

Alcuni strumenti JavaScript specifici (come Sencha ExtJS) hanno uno strumento proprietario per gestire il bundling e il minification per te. Solitamente rimuove le parti della libreria che non stai utilizzando e non interrompe la libreria quando si minimizza il codice.

Una pura soluzione JavaScript deve usare qualcosa come WebPack per generare sia il codice JavaScript in bundle, sia un file di mappa per il debug. Il file di mappa è uno standard compreso da Firefox e Chrome (con più browser in arrivo) che consente di eseguire il codice ridotto al minimo, ma di interagire con JavaScript nella finestra di debug del browser come se si trattasse di file separati. WebPack ha il vantaggio di essere in grado di trasporre codice JavaScript 6 in JavaScript 5 per quei browser legacy (come Internet Explorer).

Dopo aver utilizzato tutte e tre le soluzioni, sono a conoscenza di alcuni compromessi:

• I pacchetti di risorse sono facili da configurare e integrare. Manca solo il file di mapping per semplificare il debug.
• Le librerie proprietarie che dispongono di strumenti di raggruppamento proprietari ne hanno davvero bisogno. Abbiamo interrotto JavaScript in modi imprevedibili su diversi browser quando utilizziamo i pacchetti di risorse.
• Il Webpack ha una curva di apprendimento elevata, ma è in grado di fare cose molto impressionanti. Se hai intenzione di usare React, è quasi una necessità. Se hai un'interfaccia utente che sta parlando con un livello API REST, è la strada da percorrere.

La risposta breve è che probabilmente stai per ottenere il massimo dal tuo investimento utilizzando i pacchetti di risorse nel tuo caso specifico.

Se non vuoi passare allo sforzo di creare un caricatore AMD come require.js, MVC 5 è dotato di un sistema integrato per gestire cose come questa con la sua libreria BundleCollection. Un nuovo progetto MVC dovrebbe configurarlo automaticamente nella classe BundleConfig.cs in App_Start e fornire un esempio molto semplice del suo utilizzo.

Puoi combinare uno o più file javascript in un pacchetto, che fai riferimento nell'HTML al posto dei tag dello script. Questi script vengono automaticamente combinati in uno script e miniati se pubblicati in modalità Release (o impostando < compilation debug="false" / > in Web.Config). In fase di sviluppo i tag di script sono scritti nell'HTML.

Microsoft ha un tutorial decente su questo qui: link

Puoi anche raggruppare i file CSS, ma una cosa a cui prestare attenzione è che i percorsi relativi nei file CSS alle immagini possono essere facilmente interrotti.

Per risolvere il problema, fai quanto segue:

bundles.Add(new StyleBundle("~/cssbundles/bootstrap").Include("~/Content/bootstrap.css", new CssRewriteUrlTransform()));

Cambia i percorsi relativi nel file .css in percorsi assoluti.

A seconda della complessità delle tue dipendenze javascript e del tipo di applicazione che stai scrivendo (SPA o meno), questa potrebbe essere una soluzione più semplice. Se vuoi semplicemente caricare un gruppo di file javascript quando ne usi almeno uno, è facile da configurare e utilizzare e riduce il carico sul client raggruppando / minifying.

Penso che il buon inizio sarà cambiare il tuo codice per separare i "pacchetti" e provare a gestire le dipendenze con bower (crea i tuoi repository con le configurazioni di bower.json)

link