Pregunta 1:

¿Cuál es exactamente el propósito de instalar Twitter Bootstrap a través de npm? Pensé que npm estaba destinado a módulos del lado del servidor. ¿Es más rápido servir los archivos de arranque usted mismo que usar un CDN?

Pregunta 2:

Si tuviera que instalar npm Bootstrap, ¿cómo señalaría los archivos bootstrap.js y bootstrap.css?

1. El punto de usar CDN es que es más rápido , en primer lugar, porque es una red distribuida , pero en segundo lugar, porque los navegadores almacenan en caché los archivos estáticos y hay muchas posibilidades de que, por ejemplo, la jquerybiblioteca de CDN sea su sitio los usos ya habían sido descargados por el navegador del usuario y, por lo tanto, el archivo se había almacenado en caché y, por lo tanto, no se realiza ninguna descarga innecesaria. Dicho esto, sigue siendo una buena idea proporcionar un respaldo .

   Ahora, el punto del paquete npm de bootstrap

   es que proporciona el archivo javascript de bootstrap como módulo . Como se mencionó anteriormente, esto hace posible requireque use browserify , que es el caso de uso más probable y, según tengo entendido, la razón principal por la que bootstrap se publica en npm.

2. Cómo usarlo

   Imagine la siguiente estructura del proyecto:

   proyecto
   | - node_modules
   | - público
   El | | - css
   El | | - img
   El | | - js
   El | | - index.html
   | - package.json
   
   

En el index.htmlse puede hacer referencia tanto cssy jsarchivos de la siguiente manera:

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

Cuál es la forma más simple y correcta para los .cssarchivos. Pero es mucho mejor incluir el bootstrap.jsarchivo como este en algún lugar de sus public/js/*.jsarchivos:

var bootstrap = require('bootstrap');

E incluye este código solo en aquellos javascriptarchivos donde realmente lo necesita bootstrap.js. Browserify se encarga de incluir este archivo por usted.

Ahora, el inconveniente es que ahora tiene sus archivos front-end como node_modulesdependencias, y la node_modulescarpeta generalmente no se registra con git. Creo que esta es la parte más controvertida, con muchas opiniones y soluciones .

ACTUALIZACIÓN Marzo 2017

Han pasado casi dos años desde que escribí esta respuesta y hay una actualización en su lugar.

Ahora la forma generalmente aceptada es usar un paquete como webpack (u otro paquete de elección) para agrupar todos sus activos en un paso de compilación.

En primer lugar, le permite usar la sintaxis commonjs al igual que browserify, por lo que para incluir el código bootstrap js en su proyecto, haga lo mismo:

const bootstrap = require('bootstrap');

En cuanto a los cssarchivos, webpack ha llamado " cargadores ". Le permiten escribir esto en su código js:

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

y los archivos css se incluirán "mágicamente" en su compilación. Se agregarán dinámicamente como <style />etiquetas cuando se ejecute la aplicación, pero puede configurar el paquete web para exportarlas como un cssarchivo separado . Puede leer más sobre eso en la documentación de webpack.

En conclusión.

1. Debe "agrupar" el código de su aplicación con un agrupador
2. No debe confirmar node_modulesni los archivos generados dinámicamente en git. Puede agregar un buildscript a npm que se debe usar para implementar archivos en el servidor. De todos modos, esto se puede hacer de diferentes maneras dependiendo de su proceso de compilación preferido.

Si usa NPM esos módulos, puede servirlos mediante redireccionamiento estático.

Primero instale los paquetes:

npm install jquery
npm install bootstrap

Luego en el 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

Luego, finalmente, en el .html:

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

No serviría páginas directamente desde la carpeta donde está su archivo server.js (que generalmente es el mismo que node_modules) según lo propuesto por timetowonder , de esa manera las personas pueden acceder a su archivo server.js.

Por supuesto, puede simplemente descargar, copiar y pegar en su carpeta, pero con NPM simplemente puede actualizar cuando sea necesario ... creo que es más fácil.

Respuesta 1:

• La descarga de bootstrap a través de npm (o bower) le permite ganar algo de tiempo de latencia. En lugar de obtener un recurso remoto, obtiene uno local, es más rápido, excepto si usa un cdn (marque la respuesta a continuación)

• "npm" fue originalmente para obtener el Módulo de Nodos, pero con el método del lenguaje Javascript (y la llegada de browserify), ha crecido un poco. De hecho, incluso puede descargar AngularJS en npm, que no es un marco del lado del servidor. Browserify le permite usar AMD / RequireJS / CommonJS en el lado del cliente para que los módulos de nodo se puedan usar en el lado del cliente.

Respuesta 2:

Si npm instala bootstrap (si no usa un archivo gruñido o trago particular para moverse a una carpeta dist), su bootstrap se ubicará en "./node_modules/bootstrap/bootstrap.min.css" si no estoy equivocado.

1. Use npm / bower para instalar bootstrap si desea volver a compilarlo / cambiar menos archivos / prueba. Con gruñido sería más fácil hacer esto, como se muestra en http://getbootstrap.com/getting-started/#grunt . Si solo desea agregar bibliotecas precompiladas, siéntase libre de incluir manualmente los archivos para proyectar.

2. No, debe hacerlo usted mismo o usar una herramienta de gruñido separada. Por ejemplo 'grunt-contrib-concat' Cómo concatenar y minificar múltiples archivos CSS y JavaScript con Grunt.js (0.3.x)