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

233

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 autoinicialização do que usar uma CDN?

Questão 2:

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

James Fazio
fonte
9
O principal caso de uso em que posso pensar é usar o Browserify para o desenvolvimento de JS de front-end.
Cvrebert 6/11
1
@cvrebert: Obrigado por fornecer o tl; dr resposta :)
Ivan Durst

Respostas:

143
  1. O objetivo do uso da CDN é que ela é mais rápida , antes de tudo, porque é uma rede distribuída , mas, em segundo lugar, porque os arquivos estáticos estão sendo armazenados em cache pelos navegadores e as chances são altas de que, por exemplo, a jquerybiblioteca da CDN que seu site os usos 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 idéia fornecer um retorno .

    Agora, o ponto do pacote npm do bootstrap

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

  2. Como usá-lo

    Imagine a seguinte estrutura do projeto:

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

No seu, index.htmlvocê pode fazer referência a arquivos csse jsassim:

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

Qual é a maneira mais simples e correta para os .cssarquivos. Mas é muito melhor incluir esse bootstrap.jsarquivo em algum lugar dos seus public/js/*.jsarquivos:

var bootstrap = require('bootstrap');

E você inclui esse código apenas nos javascriptarquivos em que você realmente precisa bootstrap.js. O Browserify cuida de incluir este arquivo para você.

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


ATUALIZAÇÃO março 2017

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

Agora, a forma geralmente aceite é usar uma bundler como Webpack (ou outro bundler de escolha) para agrupar todos os seus ativos em uma etapa de compilação.

Em primeiro lugar, ele permite que você use a sintaxe commonjs da mesma maneira que o browserify, portanto, para incluir o código bootstrap js em seu projeto, faça o mesmo:

const bootstrap = require('bootstrap');

Quanto aos cssarquivos, o webpack denominou " loaders ". Eles permitem que você escreva isso no seu código js:

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

e os arquivos css serão "magicamente" incluídos na sua compilação. Eles serão adicionados dinamicamente como <style />tags quando o aplicativo for executado, mas você pode configurar o webpack para exportá-los como um cssarquivo 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 confirmar node_modulesnem os arquivos criados dinamicamente no git. Você pode adicionar um buildscript 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 compilação preferido.
horário
fonte
1
Acabei de fazer isso, mas continuo recebendo localhost: 3000 / bootstrap 404 (não encontrado), alguma opinião sobre isso?
emerak
Eu diria que "as chances são altas que, por exemplo, biblioteca jQuery da CDN que usa seu site já havia sido baixado pelo navegador do usuário" é um exagero
Devo dizer que a resposta do webpack está correta. Mas, para responder à pergunta do OP: Não há uma maneira clara de testar se um script / folha de estilo foi carregado. O HTTP / 2 pode resolver esses problemas com a multiplexação. Mas para a maior parte, você pode usar Webpack eo deferatributo em seus scripts ou arquivos de carga preguiçosos
Tamb
187

Se você NPM esses módulos, poderá servi-los usando o redirecionamento estático.

Primeiro instale os pacotes:

npm install jquery
npm install bootstrap

Em seguida, 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

Finalmente, no .html:

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

Eu não serviria páginas diretamente da pasta onde está o arquivo server.js (que geralmente é o mesmo que node_modules) como proposto por scheduleowonder , para que as pessoas possam acessar o arquivo server.js.

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

Augusto Goncalves
fonte
2
Para aqueles que trabalham com um projeto nó expressa gerado pela tempestade web, você precisa adicionar o código em suas app.js
fantasma kemicofa
Eu nunca propus manter arquivos estáticos de front-end junto com arquivos de servidor.
timetowonder
Você faz essas chamadas para o aplicativo enquanto carrega o arquivo js ou dentro do manipulador pronto?
Pupilo 20/10
@ Pablo, eu uso no começo, assim como no trecho de código.
Augusto Goncalves
1
Como a mesma /jsrota pode redirecionar para dois diretórios separados? Como ele lidaria com arquivos conflitantes em cada um?
Jacob Ford
72

Resposta 1:

  • O download do bootstrap através do npm (ou bower) permite que você obtenha 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)

  • O "npm" era originalmente para obter o Node Module, mas com a essência da linguagem Javascript (e o advento do browserify), ele cresceu um pouco. De fato, você pode até baixar o AngularJS no npm, que não é uma estrutura do lado do servidor. O Browserify permite que você use 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ê npm instalar o bootstrap (se você não usar um arquivo grunt ou gulp específico para mover para uma pasta dist), seu bootstrap estará localizado em "./node_modules/bootstrap/bootstrap.min.css" se não estiver errado.

mfrachet
fonte
5
você pode usar um comando de cópia e chamá-lo por meio de uma tarefa npm run , grunt task ou gulp . Fazendo isso, não preciso controlar o diretório "node_modules" (basta chamar "npm install" ao criar / implantar) e posso fazer referência a "styles / bootstrap.min.css" em vez de "./node_modules/bootstrap /bootstrap.min.css ".
Bless Yahu
Se houver uma desvantagem em copiar os arquivos, é natural que você tenha duas cópias dessas dependências em seu repositório. O método de redirecionamento estático mencionado por @augusto parece mais eficiente.
estaples
3
  1. Use o npm / bower para instalar o bootstrap se desejar recompilar / alterar menos arquivos / teste. Com o grunhido, seria mais fácil fazer isso, como mostrado em http://getbootstrap.com/getting-started/#grunt . Se você deseja adicionar apenas bibliotecas pré-compiladas, sinta-se à vontade para incluir manualmente os arquivos no projeto.

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

7affer
fonte