通过 npm 安装 Twitter Bootstrap 的目的是啥？

Posted 2023-03-07

【中文标题】通过 npm 安装 Twitter Bootstrap 的目的是啥？

【英文标题】：Purpose of installing Twitter Bootstrap through npm?通过 npm 安装 Twitter Bootstrap 的目的是什么？

【发布时间】：2015-01-02 14:57:00

【问题描述】：

问题一：

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

问题 2：

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

【问题讨论】：

我能想到的主要用例是使用Browserify进行前端JS开发。

@cvrebert：感谢您提供 tl;dr 答案:)

【参考方案1】：

使用CDN的重点是它更快，首先，因为它是一个分布式网络，其次，因为静态文件正在被缓存例如，您的站点使用的 CDN 的 jquery 库已经被用户的浏览器下载，因此该文件已被缓存，因此不会发生不必要的下载。话虽如此，to provide a fallback 仍然是个好主意。

现在，bootstrap 的 npm 包的重点

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

如何使用

想象以下项目结构：

项目 |-- 节点模块 |-- 公开 | |-- css | |--图片 | |-- js | |-- 索引.html |-- 包.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 签入。我认为这是最有争议的部分，有很多opinions和solutions。

---

2017 年 3 月更新

自从我写下这个答案并且更新已经到位已经快两年了。

现在普遍接受的方法是使用 bundler，如 webpack（或其他选择的捆绑器）在构建步骤中捆绑所有资产。

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

const bootstrap = require('bootstrap');

对于css 文件，webpack 有所谓的“loaders”。它们允许您在 js 代码中编写此代码：

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

css 文件将“神奇地”包含在您的构建中。 当您的应用程序运行时，它们将被动态添加为 <style /> 标签，但您可以配置 webpack 以将它们导出为单独的 css 文件。您可以在 webpack 的文档中阅读更多相关信息。

总结。

您应该使用捆绑器“捆绑”您的应用代码 您不应该将node_modules 或动态构建的文件提交给git。您可以向 npm 添加一个 build 脚本，该脚本应该用于在服务器上部署文件。无论如何，这可以根据您首选的构建过程以不同的方式完成。

【讨论】：

我刚做了这个，但不断收到localhost:3000/bootstrap 404（未找到），对此有什么想法吗？

我会说“很有可能，例如，您网站使用的 CDN 的 jquery 库已经被用户的浏览器下载”是夸大其词

不得不说webpack的回答是正确的。但是要回答 OP 问题：没有很好的方法来测试是否加载了脚本/样式表。 HTTP/2 可以通过多路复用解决这些问题。但在大多数情况下，您可以在脚本或延迟加载文件中使用 webpack 和 defer 属性

【参考方案2】：

如果您对这些模块进行 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>

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

当然，您可以简单地下载并复制并粘贴到您的文件夹中，但使用 NPM，您可以在需要时简单地更新...更简单，我认为。

【讨论】：

使用webstorm生成的express node项目需要在app.js中添加代码

我从未提议将静态前端文件与服务器文件一起保存。

你是在加载 js 文件时还是在准备好的处理程序中调用这些应用程序？

@Pablo，我一开始就用它，就像在代码sn-p中一样。

同一条/js 路由如何重定向到两个不同的目录？它将如何处理每个文件中的冲突文件？

【参考方案3】：

答案 1：

通过 npm（或 bower）下载引导程序可以让您获得一些延迟时间。您无需获取远程资源，而是获取本地资源，这样会更快，除非您使用 cdn（请查看下面的答案）

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

答案 2：

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

【讨论】：

您可以使用copy command 并通过npm run、grunt task 或gulp task 调用它。这样做，我不需要源代码控制“node_modules”（在构建/部署时只需调用“npm install”）目录，我可以引用“styles/bootstrap.min.css”而不是“./node_modules/bootstrap” /bootstrap.min.css"。

如果复制文件有缺点，很自然地，您的存储库中将拥有这些依赖项的两个副本。 @augusto 提到的静态重定向方法看起来效率更高。

【参考方案4】：

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

不，您必须自己执行此操作或使用单独的 grunt 工具。例如'grunt-contrib-concat'How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)