问题1：

通过npm安装Twitter Bootstrap的目的到底是什么？我认为npm是用于服务器端模块的。自己提供引导文件比使用CDN更快吗？

问题2：

如果要npm安装Bootstrap，我将如何指向bootstrap.js和bootstrap.css文件？

1. 使用CDN的要点是它速度更快，首先是因为它是一个分布式网络，但是其次，是因为静态文件被浏览器缓存，并且机会很大，例如，jquery您站点的CDN 库用户的浏览器已经下载了用途，因此文件已被缓存，因此没有不必要的下载发生。话虽如此，提供后备仍然是一个好主意。

   现在，引导程序的npm包的要点

   是它提供了bootstrap的javascript文件作为模块。如上所述，这使require使用browserify成为可能，这是最可能的用例，而且据我所知，引导程序发布在npm上的主要原因。

2. 如何使用它

   想象以下项目结构：

   项目
   |-node_modules
   |-公共
   | |-CSS
   | |-img
   | |-js
   | |-index.html
   |-package.json
   
   

在你的index.html，你可以引用css和js文件是这样的：

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

这是最简单的方法，并且可以正确处理.css文件。但是最好在bootstrap.js文件中的某处包含这样的public/js/*.js文件：

var bootstrap = require('bootstrap');

而且，仅在javascript实际需要的文件中包含此代码bootstrap.js。Browserify会为您包括此文件。

现在，缺点是您现在将前端文件作为node_modules依赖项，并且node_modules通常不使用来检入该文件夹git。我认为这是最有争议的部分，有很多观点和解决方案。

2017年3月更新

自从我撰写此答案以来，已经过去了将近两年，并且已经进行了更新。

现在普遍接受的方法是使用一个捆绑喜欢的WebPack（或选择的另一个打捆）捆绑所有的资产在构建步骤。

首先，它允许您像browserify一样使用commonjs语法，因此要在您的项目中包含bootstrap js代码，您可以执行以下操作：

const bootstrap = require('bootstrap');

至于css文件，webpack有所谓的“ 加载程序 ”。他们允许您在js代码中编写此代码：

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

并且CSS文件将“神奇地”包含在您的版本中。<style />当您的应用程序运行时，它们将作为标签动态添加，但是您可以配置webpack将其导出为单独的css文件。您可以在webpack的文档中阅读有关此内容的更多信息。

结论。

1. 您应该使用捆绑器“捆绑”您的应用程序代码
2. 您既不应该node_modules将动态生成的文件也不提交给git。您可以build向npm 添加脚本，该脚本应用于在服务器上部署文件。无论如何，这可以通过不同的方式来完成，具体取决于您的首选构建过程。

如果您使用NPM这些模块，则可以使用静态重定向为其提供服务。

首先安装软件包：

npm install jquery
npm install bootstrap

然后在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

然后，最后在.html上：

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

我不会按照timetowonder的建议直接从server.js文件所在的文件夹（通常与node_modules相同）的文件夹中提供页面，这样人们可以访问您的server.js文件。

当然，您可以简单地下载并复制并粘贴到您的文件夹中，但是使用NPM，您可以仅在需要时进行更新...我想这很容易。

答1：

• 通过npm（或bower）下载引导程序可以使您获得一些延迟时间。除了获取远程资源，您可以获得本地资源，而不是获取远程资源，除非您使用的是CDN（请查看下面的答案）

• “ npm”最初是用于获取Node Module的，但是随着Java语言的发展（以及browserify的出现），它有了长足的发展。实际上，您甚至可以在npm上下载AngularJS，这不是服务器端框架。Browserify允许您在客户端上使用AMD / RequireJS / CommonJS，因此可以在客户端上使用节点模块。

答案2：

如果您安装了npm bootstrap（如果您不使用特定的grunt或gulp文件移动到dist文件夹），那么如果我没有记错的话，您的bootstrap将位于“ ./node_modules/bootstrap/bootstrap.min.css”中。

1. 如果要重新编译引导程序/更改较少的文件/测试，请使用npm / bower安装引导程序。使用grunt可以更轻松地执行此操作，如http://getbootstrap.com/getting-started/#grunt所示。如果只想添加预编译的库，请随时手动包含要投影的文件。

2. 不，您必须自己执行此操作或使用单独的grunt工具。例如'grunt-contrib-concat' 如何使用Grunt.js（0.3.x）连接和缩小多个CSS和JavaScript文件