Esiste un iniettore come grunt-wiredep che funzioni per le dipendenze NPM?

Question

La maggior parte dei pacchetti al giorno d'oggi sono disponibili sia in NPM che in Bower. Devo avere NPM in giro, ma mi piacerebbe tagliare Bower fuori dal giro del mio progetto.

Attualmente sto facendo affidamento su grunt-wiredep per creare <script> incluso nel mio index.html. Questo strumento esamina tutte le configurazioni di Bower per estrarre tutti i file js e css necessari nel mio index.html per me.

C'è uno strumento che farà lo stesso per le dipendenze NPM?

Answer 1

Si sarebbe in grado di farlo utilizzando un modulo bundler come Browserify o Webpack.

per iniziare a Browserify, è necessario prima installare tramite NPM globalmente

npm install -g browserify 

Poi nel progetto, ottenere la libreria frontend che si desidera includere, come ad esempio la libreria angolare

npm install --save angular 

Ora sarà necessario utilizzare require() per fare Browserify consapevoli delle dipendenze di cui ha bisogno per andare a prendere per il progetto di lavorare (in caso di applicazione angolare, in cui si definisce il modulo principale, aggiungere questo prima linea)

var angular = require('angular'); 

angular 
    .module('autocompleteDemo', []) 
    .controller('DemoCtrl', DemoCtrl); 

Per la configurazione del compito grugnito-browserify, per prima cosa installarlo nel progetto

npm install grunt-browserify --save-dev 

e configurare l'attività come segue

browserify: { 
    main: { 
     src: 'entry.js', 
     dest: 'bundle.js' 
    } 
} 

Infine nel vostro index.html, si sarà necessario aggiungere markup per lo script bundle.js

<script src="bundle.js"></script> 

Codice di esempio può essere trovato a https://github.com/pra85/grunt-browserify-example