Domanda 1:

Qual è esattamente lo scopo di installare Twitter Bootstrap tramite npm? Pensavo che npm fosse pensato per i moduli lato server. Servire i file bootstrap è più veloce che utilizzare un CDN?

Domanda 2:

Se dovessi installare npm Bootstrap, come sceglierei i file bootstrap.js e bootstrap.css?

1. Il punto di usare 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 probabilità sono alte che, ad esempio, la jquerylibreria della CDN che il tuo sito gli usi erano già stati scaricati dal browser dell'utente e quindi il file era stato memorizzato nella cache e pertanto non si sta eseguendo alcun download non necessario. Detto questo, è comunque una buona idea fornire un fallback .

   Ora, il punto del pacchetto npm di bootstrap

   è che fornisce il file javascript di bootstrap come modulo . Come accennato in precedenza, ciò gli consente di requireutilizzare 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 vostro index.htmlè possibile fare riferimento sia csse jsfile in questo modo:

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

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

var bootstrap = require('bootstrap');

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

Ora, lo svantaggio è che ora hai i tuoi file front-end come node_modulesdipendenze e la node_modulescartella di solito non è archiviata 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 è in atto.

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

In primo luogo, ti consente di utilizzare la sintassi commonjs proprio come browserify, quindi per includere il codice js bootstrap nel tuo progetto fai lo stesso:

const bootstrap = require('bootstrap');

Per quanto riguarda i cssfile, il webpack ha i cosiddetti " caricatori ". 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 dinamicamente come <style />tag quando l'app viene eseguita, ma è possibile configurare il webpack per esportarli come cssfile separato . Puoi leggere di più al riguardo nella documentazione di webpack.

In conclusione.

1. È necessario "raggruppare" il codice dell'app con un bundler
2. Non dovresti impegnare né node_modulesgit né i file creati dinamicamente. È possibile aggiungere uno buildscript a npm che dovrebbe essere utilizzato per distribuire file sul server. Ad ogni modo, questo può essere fatto in diversi modi a seconda del processo di compilazione preferito.

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

Per prima cosa installa i pacchetti:

npm install jquery
npm install bootstrap

Quindi su 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:

<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

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

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

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 la risposta sotto)

• "npm" doveva originariamente ottenere il modulo nodo, ma con l'essenza del linguaggio Javascript (e l'avvento di browserify), è cresciuto un po '. In effetti, puoi anche 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 del nodo possano essere utilizzati sul lato client.

Risposta 2:

Se non installi bootstrap (se non usi un particolare file grunt o gulp per passare a 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 vuoi solo aggiungere librerie precompilate, sentiti libero di includere manualmente i file da proiettare.

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