通过npm安装bootstrap的目的是什么？

问题1：

通过npm安装bootstrap的目的是什么？ 我以为npm是为了服务器端模块。 服务引导文件比使用CDN更快吗？

问题2：

如果我是npm install bootstrap，我将如何指向bootstrap.js和bootstrap.css文件？

Answer 1

1. 使用CDN的意义在于它首先是更快的，因为它是一个分布式networking，其次，因为静态文件被浏览器caching，机会很大，例如，CDN的jquery库网站使用已经被用户的浏览器下载，因此该文件已被caching，因此不会发生不必要的下载。 这就是说， 提供一个回退是一个好主意。

   现在，bootstrap的npm包的重点

   是它提供引导的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文件。 但是在public/js/*.js文件的某个地方包含bootstrap.js文件要好得多：

 var bootstrap = require('bootstrap'); 

而且你只在那些实际需要bootstrap.js javascript文件中包含这些代码。 Browserify负责为您包含此文件。

现在，缺点是你现在有你的前端文件作为node_modules依赖关系，并且node_modules文件夹通常不用git签入。 我认为这是最有争议的部分，有很多意见和解决办法 。

---

更新2017年3月

自从我写了这个答案之后，差不多两年过去了，并且有了更新。

现在普遍接受的方式是使用像webpack （或其他select的打包器）的打包器在构build步骤中捆绑所有资产。

首先，它允许你像使用browserify一样使用commonjs语法，所以为了在你的项目中包含bootstrap js代码，你可以这样做：

 const bootstrap = require('bootstrap'); 

至于css文件，webpack有所谓的“ 加载器 ”。 他们允许你写在你的JS代码：

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

和CSS文件将“神奇”包括在您的构build。 当您的应用程序运行时，它们将被dynamic添加为<style />标记，但是您可以configurationwebpack以将它们作为单独的css文件导出。 你可以在webpack的文档中阅读更多。

结论是。

1. 您应该使用捆绑软件“捆绑”您的应用程序代码
2. 你不应该既不提交node_modules也不提交dynamic构build的文件。 你可以添加一个build脚本到npm应该用来在服务器上部署文件。 无论如何，这可以根据您首选的构build过程以不同的方式完成。

Answer 2

如果你NPM这些模块，你可以使用静态redirect服务他们。

首先安装软件包：

 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> 

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

当然你可以简单地下载并复制并粘贴到你的文件夹中，但是使用NPM，你可以简单地在需要的时候更新…我觉得更简单。

Answer 3

答案1：

• 通过npm（或bower）下载bootstrap允许您获得一些延迟时间。 除了获取远程资源之外，您还可以获得本地资源，除非您使用cdn（请在下面的答案中查看）

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

答案2：

如果你npm安装bootstrap（如果你不使用一个特定的grunt或gulp文件移动到一个dist文件夹），你的引导将位于“./node_modules/bootstrap/bootstrap.min.css”，如果我没有错。

Answer 4

1. 使用npm / bower安装引导程序，如果你想重新编译/更改less文件/testing。 用grunt来做这件事会更容易，如http://getbootstrap.com/getting-started/#grunt所示。; 如果您只想添加预编译的库，请随意手动将文件包含到项目中。

2. 不，你必须自己做，或使用单独的咕噜声工具。 例如'grunt-contrib-concat' 如何使用Grunt.js（0.3.x）连接和缩小多个CSS和JavaScript文件