node bootstrap node.js twitter-bootstrap express npm cdn

node.js - node - ¿Propósito de instalar Twitter Bootstrap a través de npm?



node js bootstrap (4)

Pregunta 1:

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

Pregunta 2:

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

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

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

  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 las posibilidades son altas de que, por ejemplo, la biblioteca jquery de CDN los usos del sitio 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 realizaban descargas innecesarias. Dicho esto, sigue siendo una buena idea proporcionar un respaldo .

    Ahora, el punto del paquete npm bootstrap

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

  2. Cómo usarlo

    Imagina la siguiente estructura de proyecto:

    project |-- node_modules |-- public | |-- css | |-- img | |-- js | |-- index.html |-- package.json

En su index.html puede hacer referencia a los archivos css y js esta 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 sencilla 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 aquellos 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 de front-end como dependencias de node_modules , y la carpeta node_modules generalmente no se registra con git . Creo que esta es la parte más controvertida, con muchas opinions y solutions .

ACTUALIZACIÓN Marzo 2017

Han pasado casi dos años desde que escribí esta respuesta y se ha realizado una actualización.

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 de commonjs al igual que browserify, así que para incluir el código bootstrap js en su proyecto, haga lo mismo:

const bootstrap = require(''bootstrap'');

En cuanto a los archivos css , webpack ha llamado " loaders ". 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 tu compilación. Se agregarán dinámicamente como etiquetas <style /> cuando se ejecute su aplicación, pero puede configurar el paquete web para exportarlos como un archivo css separado. Puedes leer más sobre eso en la documentación de webpack.

En conclusión.

  1. Debes "empaquetar" el código de tu aplicación con un empaquetador
  2. No deberías comprometer ni node_modules ni los archivos construidos dinámicamente para git. Puede agregar un script de compilación a npm que se debe usar para implementar archivos en el servidor. De todos modos, esto puede hacerse de diferentes maneras dependiendo de su proceso de construcción preferido.

Si NPM esos módulos puede servirlos usando redirección estática.

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

Entonces, 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 se encuentra su archivo server.js (que suele ser el mismo que node_modules) según lo propuesto por timetowonder , de esa manera la gente puede acceder a su archivo server.js.

Por supuesto, simplemente puede 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 algo de tiempo de latencia. En lugar de obtener un recurso remoto, obtienes uno local, es más rápido, excepto si usas un cdn (ver la respuesta a continuación)

  • "npm" fue originalmente para obtener el módulo de nodo, pero con la habilidad 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 archivo particular o trillado para moverse a una carpeta dist), su bootstrap se ubicará en "./node_modules/bootstrap/bootstrap.min.css" si no estoy equivocado.