Objetivo de instalar o Twitter Bootstrap através do npm?

Questão 1:

Qual é exatamente o propósito de instalar o Twitter Bootstrap através do npm? Eu pensei que o npm era para módulos do lado do servidor. É mais rápido servir os arquivos de bootstrap do que usar um CDN?

Questão 2:

Se eu fosse para o npm instalar o Bootstrap, como eu apontaria para os arquivos bootstrap.js e bootstrap.css?

  1. O ponto de usar o CDN é que ele é mais rápido , em primeiro lugar, porque é uma rede distribuída , mas, em segundo lugar, porque os arquivos estáticos estão sendo armazenados pelos navegadores e as chances são altas, por exemplo, da biblioteca jquery do CDN. usos do site já foram baixados pelo navegador do usuário e, portanto, o arquivo foi armazenado em cache e, portanto, nenhum download desnecessário está ocorrendo. Dito isto, ainda é uma boa ideia fornecer um substituto .

    Agora, o ponto do pacote npm do bootstrap

    é que ele fornece o arquivo javascript do bootstrap como um módulo . Como foi mencionado acima, isso possibilita a utilização do browserify , que é o caso de uso mais provável e, pelo que entendi, o principal motivo para o bootstrap ser publicado no npm.

  2. Como usá-lo

    Imagine a seguinte estrutura de projeto:

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

No seu index.html você pode referenciar os arquivos css e js assim:

   

Qual é a maneira mais simples e correta para os arquivos .css . Mas é muito melhor include o arquivo bootstrap.js como este em algum lugar em seus arquivos public/js/*.js :

 var bootstrap = require('bootstrap'); 

E você inclui esse código somente nos arquivos javascript que você realmente precisa do bootstrap.js . Browserify cuida de include este arquivo para você.

Agora, a desvantagem é que agora você tem seus arquivos front-end como dependencies node_modules , e a pasta node_modules geralmente não é registrada com git . Eu acho que essa é a parte mais controversa, com muitas opiniões e soluções .


ATUALIZAÇÃO Março de 2017

Quase dois anos se passaram desde que escrevi esta resposta e uma atualização está em vigor.

Agora, a maneira geralmente aceita é usar um bundler como o webpack (ou outro bundler de escolha) para agrupar todos os seus ativos em uma etapa de construção.

Em primeiro lugar, permite que você use a syntax commonjs da mesma forma que o browserify, então, para include o código bootstrap js em seu projeto, você faz o mesmo:

 const bootstrap = require('bootstrap'); 

Quanto aos arquivos css , o webpack tem os chamados ” loaders “. Eles permitem que você escreva isso no seu código js:

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

e os arquivos css serão incluídos “magicamente” em sua construção. Eles serão adicionados dinamicamente como tags

quando seu aplicativo for executado, mas você poderá configurar o webpack para exportá-los como um arquivo css separado. Você pode ler mais sobre isso na documentação do webpack.

Em conclusão.

  1. Você deve "agrupar" o código do seu aplicativo com um bundler
  2. Você não deve comprometer nem o node_modules nem os arquivos construídos dinamicamente para o git. Você pode adicionar um script de build ao npm que deve ser usado para implantar arquivos no servidor. De qualquer forma, isso pode ser feito de maneiras diferentes, dependendo do seu processo de criação preferido.

Se você NPM esses módulos você pode atendê-los usando o redirecionamento estático.

Primeiro instale os pacotes:

 npm install jquery npm install bootstrap 

Então no 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 

Então, finalmente, no .html:

    

Eu não iria servir páginas diretamente da pasta onde o seu arquivo server.js é (que é geralmente o mesmo que node_modules), tal como proposto pelo timetowonder , dessa forma as pessoas podem acessar o seu arquivo server.js.

Claro que você pode simplesmente baixar e copiar e colar em sua pasta, mas com o NPM você pode simplesmente atualizar quando necessário … mais fácil, eu acho.

Resposta 1:

  • O download do bootstrap através do npm (ou bower) permite que você ganhe algum tempo de latência. Em vez de obter um recurso remoto, você obtém um local, é mais rápido, exceto se você usar um cdn (verifique a resposta abaixo)

  • “npm” foi originalmente para obter o Node Module, mas com o essencial da linguagem Javascript (e o advento do browserify), ele cresceu um pouco. Na verdade, você pode até baixar o AngularJS no npm, que não é uma estrutura do lado do servidor. O Browserify permite que você use o AMD / RequireJS / CommonJS no lado do cliente para que os módulos do nó possam ser usados ​​no lado do cliente.

Resposta 2:

Se você instalar nsh bootstrap (se você não usar um determinado grunhido ou arquivo gulp para mover para uma pasta dist), seu bootstrap estará localizado em “./node_modules/bootstrap/bootstrap.min.css” se eu não estiver errado.

  1. Use o npm / bower para instalar o bootstrap se você quiser recompilar / alterar menos arquivos / teste. Com grunhido, seria mais fácil fazer isso, como mostrado em http://getbootstrap.com/getting-started/#grunt . Se você quiser apenas adicionar bibliotecas pré-compiladas, sinta-se à vontade para include manualmente os arquivos no projeto.

  2. Não, você tem que fazer isso sozinho ou usar uma ferramenta separada. Por exemplo, ‘grunt-contrib-concat’ Como concatenar e minimizar vários arquivos CSS e JavaScript com Grunt.js (0.3.x)

Intereting Posts