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?

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.

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.

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.

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)