Propósito de instalar Twitter Bootstrap a través de npm?

233

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?

James Fazio
fuente
99
El caso de uso principal que se me ocurre es usar Browserify para el desarrollo de JS de su frontend.
cvrebert
1
@cvrebert: gracias por proporcionar la respuesta tl; dr :)
Ivan Durst

Respuestas:

143
  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.
timetowonder
fuente
1
Acabo de hacer esto pero sigo obteniendo localhost: 3000 / bootstrap 404 (No encontrado), ¿alguna idea sobre esto?
emerak el
Yo diría que "hay muchas posibilidades de que, por ejemplo, la biblioteca jquery de la CDN que utiliza su sitio ya haya sido descargada por el navegador del usuario" es una exageración
Tengo que decir que la respuesta del paquete web es correcta. Pero para responder a la pregunta de OP: no hay una forma clara de probar si se cargó un script / hoja de estilo. HTTP / 2 puede resolver estos problemas con la multiplexación. Pero en su mayor parte, puede usar webpack y el deferatributo en sus scripts o archivos de carga diferida
Tamb
187

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.

Augusto Goncalves
fuente
2
Para aquellos que trabajan con un proyecto de nodo rápido generado por tormenta web, deben agregar el código en su app.js
kemicofa ghost
Nunca propuse mantener archivos estáticos de front-end junto con archivos del servidor.
timetowonder
¿Hace esas llamadas a la aplicación mientras carga el archivo js o dentro del controlador listo?
pupeno
@Pablo, lo uso al principio, al igual que en el fragmento de código.
Augusto Goncalves
1
¿Cómo puede la misma /jsruta redirigir a dos directorios separados? ¿Cómo manejaría los archivos en conflicto en cada uno?
Jacob Ford
72

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.

mfrachet
fuente
55
puede usar un comando de copia y llamarlo a través de una ejecución npm , tarea gruñida o tarea de trago . Al hacer esto, no necesito controlar en origen el directorio "node_modules" (simplemente llame al directorio "npm install" cuando compile / implemente), y puedo hacer referencia a "styles / bootstrap.min.css" en lugar de "./node_modules/bootstrap /bootstrap.min.css ".
Bendice a Yahu el
Si hay un inconveniente en copiar los archivos, es natural que tenga dos copias de esas dependencias en su repositorio. El método de redireccionamiento estático mencionado por @augusto parece más eficiente.
estaples
3
  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)

7affer
fuente