¿El propósito de instalar Twitter Bootstrap a través de npm?

Pregunta 1:

¿Cuál es exactamente el propósito de instalar Twitter Bootstrap a través de npm? Pensé que npm estaba destinado a los 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 podría apuntar a los archivos bootstrap.js y bootstrap.css?

  1. El objective 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 guardan en caché los archivos estáticos y hay muchas posibilidades de que, por ejemplo, la biblioteca jquery del CDN que su el navegador del usuario ya había descargado los usos del sitio y, por lo tanto, el archivo se había almacenado en la memoria caché y, por lo tanto, no se estaban realizando descargas innecesarias. Dicho esto, sigue siendo una buena idea proporcionar una alternativa .

    Ahora, el punto del paquete npm de bootstrap

    es que proporciona el archivo Javascript de bootstrap como un módulo . Como se mencionó anteriormente, esto hace que sea posible require usando browserify , que es el caso de uso más probable y, según tengo entendido, el motivo principal de bootstrap que se publica en npm.

  2. Cómo usarlo

    Imagine la siguiente estructura de proyecto:

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

En su index.html puede hacer referencia a los archivos css y js como este:

   

Que es la forma más simple y correcta para los archivos .css . Pero es mucho mejor incluir el archivo bootstrap.js como este en algún lugar de sus archivos public/js/*.js :

 var bootstrap = require('bootstrap'); 

E incluye este código solo en los archivos javascript donde realmente necesita bootstrap.js . Browserify se encarga de incluir este archivo por ti.

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


ACTUALIZACIÓN de marzo de 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 tipo bundler (u otro bundler de elección) para agrupar todos sus activos en un paso de comstackción.

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

 const bootstrap = require('bootstrap'); 

En cuanto a los archivos css , webpack tiene los llamados ” cargadores “. Te permiten escribir esto en tu código js:

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

y los archivos CSS se incluirán “mágicamente” en su comstackción. Se agregarán dinámicamente como tags

cuando se ejecute su aplicación, pero puede configurar el paquete web para exportarlos como un archivo css independiente. Puede leer más sobre eso en la documentación de la carpeta web.

En conclusión.

  1. Debes "agrupar" el código de tu aplicación con un paquete
  2. No debe comprometer ni node_modules ni los archivos node_modules dinámicamente a git. Puede agregar un script de comstackción 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 comstackción preferido.

Si tiene NPM en esos módulos, puede atenderlos usando redirección estática.

Primero instala 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 

Entonces, finalmente, en el .html:

    

No serviría páginas directamente desde la carpeta donde está el archivo server.js (que generalmente es lo 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 y copiar y pegar en su carpeta, pero con NPM puede simplemente actualizar cuando sea necesario … más fácil, creo.

Respuesta 1:

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

  • “npm” originalmente era para obtener el Módulo Nodo, pero con el recurso del lenguaje Javascript (y el advenimiento 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 gruñido particular o un gulp para mover 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 comstackr / 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 precomstackdas, siéntase libre de incluir manualmente los archivos para proyectar.

  2. No, tienes que hacer esto por ti 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)