Scopo dell’installazione di Twitter Bootstrap tramite npm?

Domanda 1:

Qual è esattamente lo scopo di installare Twitter Bootstrap tramite npm? Pensavo che npm fosse pensato per i moduli lato server. È più veloce servire i file di bootstrap da solo che usare una CDN?

Domanda 2:

Se dovessi installare nst Bootstrap, come dovrei puntare ai file bootstrap.js e bootstrap.css?

  1. Il punto di utilizzo di CDN è che è più veloce , prima di tutto, perché è una rete distribuita , ma in secondo luogo, perché i file statici vengono memorizzati nella cache dai browser e le possibilità sono elevate, ad esempio, la libreria jquery della CDN che gli usi del sito erano già stati scaricati dal browser dell’utente e, di conseguenza, il file era stato memorizzato nella cache e pertanto non è in corso alcun download non necessario. Detto questo, è comunque una buona idea fornire un ripiego .

    Ora, il punto del pacchetto npm di bootstrap

    è che fornisce il file javascript di bootstrap come un modulo . Come è stato detto sopra, questo rende ansible require usando browserify , che è il caso d’uso più probabile e, a quanto ho capito, il motivo principale per cui bootstrap è stato pubblicato su npm.

  2. Come usarlo

    Immagina la seguente struttura del progetto:

     progetto
     | - node_modules
     | - pubblico
     |  | - css
     |  | - img
     |  | - js
     |  | - index.html
     | - package.json
    
    

Nel tuo index.html puoi fare riferimento a entrambi i file css e js questo modo:

   

Qual è il modo più semplice e corretto per i file .css . Ma è molto meglio includere il file bootstrap.js come questo da qualche parte nei tuoi file public/js/*.js :

 var bootstrap = require('bootstrap'); 

E includi questo codice solo in quei file javascript cui hai effettivamente bisogno di bootstrap.js . Browserify si occupa di includere questo file per te.

Ora, lo svantaggio è che ora avete i vostri file front-end come dipendenze node_modules , e la cartella node_modules solito non viene archiviata con git . Penso che questa sia la parte più controversa, con molte opinioni e soluzioni .


AGGIORNAMENTO Marzo 2017

Sono passati quasi due anni da quando ho scritto questa risposta e un aggiornamento è a posto.

Ora il modo generalmente accettato è quello di utilizzare un pacchetto simile a un bundler (o un altro pacchetto di scelta) per raggruppare tutte le risorse in una fase di creazione.

In primo luogo, ti permette di usare la syntax commonjs proprio come browserify, quindi per includere il codice jst di bootstrap nel tuo progetto fai lo stesso:

 const bootstrap = require('bootstrap'); 

Per quanto riguarda i file css , il webpack ha i cosiddetti ” loader “. Ti permettono di scrivere questo nel tuo codice js:

 require('bootstrap/dist/css/bootstrap.css'); 

e i file CSS saranno “magicamente” inclusi nella tua build. Verranno aggiunti dynamicmente come

durante l'esecuzione dell'app, ma puoi configurare webpack per esportarli come file css separato. Puoi leggere ulteriori informazioni a riguardo nella documentazione di webpack.

In conclusione.

  1. Dovresti "raggruppare" il codice della tua app con un bundler
  2. Non devi impegnare né node_modules né i file creati dynamicmente per git. È ansible aggiungere uno script di build a npm che dovrebbe essere utilizzato per distribuire i file sul server. Ad ogni modo, questo può essere fatto in modi diversi a seconda del processo di costruzione preferito.

Se si NPM quei moduli è ansible servirli utilizzando il reindirizzamento statico.

Prima installa i pacchetti:

 npm install jquery npm install bootstrap 

Quindi sul server.js:

 var express = require('express'); var app = express(); // prepare server app.use('/api', api); // redirect API calls app.use('/', express.static(__dirname + '/www')); // redirect root app.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js')); // redirect bootstrap JS app.use('/js', express.static(__dirname + '/node_modules/jquery/dist')); // redirect JS jQuery app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); // redirect CSS bootstrap 

Quindi, infine, al .html:

    

Non servirei le pagine direttamente dalla cartella in cui si trova il file server.js (che di solito è uguale a node_modules) come proposto da timetowonder , in questo modo le persone possono accedere al file server.js.

Ovviamente puoi semplicemente scaricare e copiare e incollare sulla tua cartella, ma con NPM puoi semplicemente aggiornare quando necessario … più facile, penso.

Risposta 1:

  • Il download del bootstrap tramite npm (o bower) ti consente di guadagnare un po ‘di tempo di latenza. Invece di ottenere una risorsa remota, ne ottieni una locale, è più veloce, tranne se usi un cdn (controlla sotto la risposta)

  • “npm” era originariamente per ottenere il modulo nodo, ma con l’essort del linguaggio Javascript (e l’avvento di browserify), è un po ‘cresciuto. In effetti, puoi persino scaricare AngularJS su npm, che non è un framework lato server. Browserify consente di utilizzare AMD / RequireJS / CommonJS sul lato client in modo che i moduli nodo possano essere utilizzati sul lato client.

Risposta 2:

Se npm installa bootstrap (se non usi un particolare file grunt o gulp per spostarti in una cartella dist), il tuo bootstrap si troverà in “./node_modules/bootstrap/bootstrap.min.css” se non sbaglio.

  1. Usa npm / bower per installare bootstrap se vuoi ricompilarlo / cambiare meno file / test. Con grunt sarebbe più facile farlo, come mostrato su http://getbootstrap.com/getting-started/#grunt . Se si desidera aggiungere solo librerie precompilate, sentirsi liberi di includere manualmente i file da proiettare.

  2. No, devi farlo da solo o utilizzare uno strumento separato per grugniti. Per esempio ‘grunt-contrib-concat’ Come concatenare e minimizzare più file CSS e JavaScript con Grunt.js (0.3.x)