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?
Respostas:
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
jquery
biblioteca 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
require
o 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.Como usá-lo
Imagine a seguinte estrutura do projeto:
No seu,
index.html
você pode fazer referência a arquivoscss
ejs
assim:Qual é a maneira mais simples e correta para os
.css
arquivos. Mas é muito melhor incluir essebootstrap.js
arquivo em algum lugar dos seuspublic/js/*.js
arquivos:E você inclui esse código apenas nos
javascript
arquivos em que você realmente precisabootstrap.js
. O Browserify cuida de incluir este arquivo para você.Agora, a desvantagem é que agora você tem seus arquivos front-end como
node_modules
dependências e anode_modules
pasta geralmente não é registradagit
. 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:
Quanto aos
css
arquivos, o webpack denominou " loaders ". Eles permitem que você escreva isso no seu código js: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 umcss
arquivo separado . Você pode ler mais sobre isso na documentação do webpack.Em conclusão.
node_modules
nem os arquivos criados dinamicamente no git. Você pode adicionar umbuild
script 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.fonte
defer
atributo em seus scripts ou arquivos de carga preguiçososSe você NPM esses módulos, poderá servi-los usando o redirecionamento estático.
Primeiro instale os pacotes:
Em seguida, no server.js:
Finalmente, no .html:
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.
fonte
/js
rota pode redirecionar para dois diretórios separados? Como ele lidaria com arquivos conflitantes em cada um?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.
fonte
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.
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)
fonte