通过npm安装Twitter Bootstrap的目的？

Question

问题1：

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

问题2：

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

Answer 1

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

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

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

1. 如何使用它

想象以下项目结构：

    项目
|-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。我认为这是最有争议的部分，有很多观点和解决方案。

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

现在普遍接受的方法是使用一个 捆绑
喜欢的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 添加脚本，该脚本应用于在服务器上部署文件。无论如何，这可以通过不同的方式来完成，具体取决于您的首选构建过程。