javascript - node - yarn serve




Qual è la differenza tra Bower e npm? (6)

Aggiornamento 2017-ottobre

Bower è stato finalmente deprecated . Fine della storia.

Risposta precedente

Da Mattias Petter Johansson, sviluppatore JavaScript di Spotify :

In quasi tutti i casi, è più appropriato utilizzare Browserify e npm su Bower. È semplicemente una soluzione di packaging migliore per le app di front-end rispetto a Bower. A Spotify usiamo npm per impacchettare interi moduli web (html, css, js) e funziona molto bene.

Bower si autodefinisce come gestore di pacchetti per il web. Sarebbe fantastico se fosse vero - un gestore di pacchetti che mi ha reso la vita migliore come sviluppatore front-end sarebbe fantastico. Il problema è che Bower non offre strumenti specifici per lo scopo. Non offre strumenti che io sappia che npm no, e specialmente nessuno che sia specificamente utile per gli sviluppatori front-end. Non c'è semplicemente alcun vantaggio per uno sviluppatore front-end di utilizzare Bower su npm.

Dovremmo smettere di usare bower e consolidarci attorno a npm. Per fortuna, questo è ciò che sta accadendo :

Con browserify o webpack, diventa estremamente facile concatenare tutti i tuoi moduli in file minifigurati, il che è fantastico per le prestazioni, specialmente per i dispositivi mobili. Non così con Bower, che richiederà molto più lavoro per ottenere lo stesso effetto.

npm offre anche la possibilità di utilizzare più versioni di moduli contemporaneamente. Se non hai fatto molto sviluppo di applicazioni, questo potrebbe inizialmente sembrarti una brutta cosa, ma una volta che hai attraversato alcuni periodi infernali di dipendenza ti renderai conto che avere la possibilità di avere più versioni di un modulo è un vero e proprio dannato grande funzionalità. Notare che npm include uno strumento di deduplicazione molto utile che si assicura automaticamente che si utilizzino solo due versioni di un modulo, se proprio si deve : se due moduli possono entrambi usare la stessa versione di un modulo, lo faranno. Ma se non ci riescono , hai una mano molto utile.

(Si noti che Webpack e rollup sono ampiamente considerati migliori di Browserify ad agosto 2016.)

Qual è la differenza fondamentale tra bower e npm ? Voglio solo qualcosa di semplice e chiaro. Ho visto alcuni dei miei colleghi usare bower e npm intercambiabile nei loro progetti.


Bower e Npm sono gestori di pacchetti per javascript.

pergolato

Bower è stato creato esclusivamente per lo sviluppo front-end. Usa un albero delle dipendenze piatto, che richiede solo una versione per ogni pacchetto, riducendo il carico della pagina. Mira principalmente a un carico di risorse minimo. Ha meno contributori e quindi il processo di sviluppo è lento.

Bower ha un file di configurazione chiamato bower.json. In questo file possiamo mantenere la configurazione di Bower come le dipendenze di cui abbiamo bisogno e dettagli sulla licenza, descrizione, nome e così via. Bower è adatto per pacchetti front-end come jquery, angolare, reagire, brace, knockout, backbone e così via.

npm

Npm è più comunemente usato per gestire i moduli Node.js, ma funziona anche per il front-end. Usa albero delle dipendenze annidato e albero delle dipendenze piatto. È popolare e ha molti contributori. Quindi la sua nuova versione ha sempre caratteristiche interessanti.

Npm ha un file di configurazione chiamato package.json. In questo file possiamo mantenere la configurazione per Npm come le dipendenze di cui abbiamo bisogno e dettagli sulla licenza, descrizione, nome e così via. Npm fornisce Dipendenze e DevDependencies. Le dipendenze scaricheranno e manterranno i file front-end come Jquery, Angular e così via. DevDependencies scaricherà e manterrà strumenti di sviluppo come Grunt, Gulp, JSHint e così via.

Questo ovviamente non funziona bene sul front-end, perché abbiamo bisogno di jQuery nei nostri progetti. Abbiamo bisogno di una sola copia di jQuery, ma quando un altro pacchetto richiede jQuery, scaricherà ancora un'altra copia di jQuery. Questo è uno dei principali inconvenienti di Npm.

Nota chiave: il motivo per cui molti progetti usano entrambi è che usano Bower per i pacchetti front-end e Npm per gli strumenti di sviluppo. Moltiplicando il gestore di pacchetti nel tuo progetto rendi più difficile il tuo flusso di lavoro. Npm 3 accoppiato con Browserify o webpack è la strada da percorrere ora.


Ho trovato questa utile spiegazione da http://ng-learn.org/2013/11/Bower-vs-npm/

Da un lato npm è stato creato per installare i moduli utilizzati in un ambiente node.js, o strumenti di sviluppo creati usando node.js come Karma, Lint, minifiers e così via. npm può installare moduli localmente in un progetto (per impostazione predefinita in node_modules) o globalmente per essere utilizzati da più progetti. Nei progetti di grandi dimensioni, il modo per specificare le dipendenze consiste nel creare un file chiamato package.json che contiene un elenco di dipendenze. Tale elenco viene riconosciuto da npm quando si esegue l'installazione di npm, che quindi viene scaricato e installato per l'utente.

D'altra parte è stato creato bower per gestire le dipendenze frontend. Librerie come jQuery, AngularJS, underscore, ecc. Simile a npm ha un file in cui è possibile specificare un elenco di dipendenze chiamato bower.json. In questo caso, le dipendenze frontend vengono installate eseguendo bower install che, per impostazione predefinita, le installa in una cartella denominata bower_components.

Come puoi vedere, sebbene eseguano un'attività simile, sono mirati a un insieme di librerie molto diverso.


La mia squadra si è trasferita da Bower e ha migrato su npm perché:

  • L'uso programmatico era doloroso
  • L'interfaccia di Bower continuava a cambiare
  • Alcune funzionalità, come l'url stenografia, sono completamente infranti
  • Usare sia Bower che npm nello stesso progetto è doloroso
  • Mantenere il campo della versione di bower.json in sincronia con i tag git è doloroso
  • Controllo del codice sorgente! = Gestione dei pacchetti
  • Il supporto di CommonJS non è semplice

Per maggiori dettagli, vedi "Perché il mio team usa npm invece di bower" .


Questa risposta è un'aggiunta alla risposta di Sindre Sorhus. La principale differenza tra npm e Bower è il modo in cui trattano le dipendenze ricorsive. Si noti che possono essere utilizzati insieme in un singolo progetto.

Domande frequenti su npm : (archive.org link del 6 set 2015)

È molto più difficile evitare i conflitti di dipendenza senza dipendenze di nidificazione. Questo è fondamentale per il modo in cui funziona npm e ha dimostrato di essere un approccio di grande successo.

Sulla homepage di Bower :

Bower è ottimizzato per il front-end. Bower utilizza un albero di dipendenza piatto, che richiede solo una versione per ogni pacchetto, riducendo al minimo il carico della pagina.

In breve, npm punta alla stabilità. Bower punta a un carico di risorse minimo. Se estrai la struttura delle dipendenze, vedrai questo:

NPM:

project root
[node_modules] // default directory for dependencies
 -> dependency A
 -> dependency B
    [node_modules]
    -> dependency A

 -> dependency C
    [node_modules]
    -> dependency B
      [node_modules]
       -> dependency A 
    -> dependency D

Come puoi vedere installa alcune dipendenze in modo ricorsivo. Dipendenza A ha tre istanze installate!

Bower:

project root
[bower_components] // default directory for dependencies
 -> dependency A
 -> dependency B // needs A
 -> dependency C // needs B and D
 -> dependency D

Qui vedi che tutte le dipendenze uniche sono sullo stesso livello.

Quindi, perché preoccuparsi di usare npm?

Forse la dipendenza B richiede una versione diversa della dipendenza A rispetto alla dipendenza C. npm installa entrambe le versioni di questa dipendenza in modo che funzioni ugualmente, ma Bower ti darà un conflitto perché non gli piace la duplicazione (perché caricare la stessa risorsa su una pagina web è molto inefficiente e costoso, inoltre può dare alcuni errori gravi). Dovrai selezionare manualmente la versione che desideri installare. Ciò può avere l'effetto che una delle dipendenze si interrompe, ma è qualcosa che dovrai comunque risolvere.

Quindi, l'uso comune è Bower per i pacchetti che vuoi pubblicare sulle tue pagine web (es. Runtime , dove eviti la duplicazione) e usa npm per altre cose, come test, creazione, ottimizzazione, controllo, ecc. (Ad es. Tempo di sviluppo , dove la duplicazione è meno preoccupante).

Aggiornamento per npm 3:

npm 3 fa ancora le cose in modo diverso rispetto a Bower. Installa le dipendenze a livello globale, ma solo per la prima versione che incontra. Le altre versioni sono installate nell'albero (il modulo genitore, quindi node_modules).

  • [node_modules]
    • dep A v1.0
    • dep B v1.0
      • dep A v1.0 (usa la versione di root)
    • dep C v1.0
      • dep A v2.0 (questa versione è diversa dalla versione root, quindi sarà un'installazione nidificata)

Per maggiori informazioni, suggerisco di leggere i documenti di npm 3


Tutti i gestori di pacchetti hanno molti aspetti negativi. Devi solo scegliere con chi puoi vivere.

Storia

npm ha iniziato a gestire i moduli node.js (ecco perché i pacchetti entrano in node_modules per impostazione predefinita), ma funziona anche per il front-end quando combinato con Browserify o WebPack.

Bower è creato esclusivamente per il front-end ed è ottimizzato per questo.

Dimensione del pronti contro termine

npm è molto, molto più grande di bower, incluso JavaScript generico (come country-data nazionali per le informazioni sui paesi o gli sorts per le funzioni di ordinamento utilizzabili sul front-end o sul back-end).

Bower ha una quantità molto minore di pacchetti.

Gestione di stili ecc

Bower include stili, ecc.

npm è incentrato su JavaScript. Gli stili possono essere scaricati separatamente o richiesti da qualcosa come npm-sass o sass-npm .

Gestione delle dipendenze

La più grande differenza è che npm fa le dipendenze nidificate (ma è piatta per impostazione predefinita) mentre Bower richiede una struttura ad albero dipendente (mette l'onere della risoluzione delle dipendenze sull'utente) .

Un albero di dipendenza nidificato significa che le dipendenze possono avere le proprie dipendenze che possono avere le proprie e così via. Ciò consente a due moduli di richiedere versioni diverse della stessa depenency e funzionano ancora. Nota poiché npm v3, l'albero delle dipendenze sarà piatto per impostazione predefinita (risparmiando spazio) e anniderà solo dove necessario, ad esempio se due dipendenze necessitano della propria versione di Underscore.

Alcuni progetti usano entrambi è che usano Bower per pacchetti front-end e npm per strumenti di sviluppo come Yeoman, Grunt, Gulp, JSHint, CoffeeScript, ecc.

risorse





bower