logo标签列表

通过npm安装Twitter Bootstrap的目的是什么？

node.jstwitter-bootstrapexpressnpmcdn
244

问题1：

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

问题2：

如果我想通过npm安装Bootstrap，如何指向bootstrap.js和bootstrap.css文件？

9
我可以想到的主要用例是在前端JS开发中使用Browserify。 - cvrebert
1
@cvrebert：感谢您提供简短明了的答案 :) - Ivan Durst
4个回答
198
如果您使用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相同）提供页面，这是timetowonder提出的，这样人们就可以访问你的server.js文件。

当然，你可以简单地下载并复制粘贴到你的文件夹中，但使用NPM可以更轻松地在需要时进行更新……我认为这更容易。

3
若你正在使用由WebStorm生成的Express Node项目，则需要在你的app.js文件中添加代码。 - kemicofa ghost
我从未提议将静态前端文件与服务器文件放在一起。 - timetowonder
你是在加载js文件时还是在就绪处理程序中调用应用程序？ - pupeno
@Pablo，我在代码片段中一开始就使用它。 - Augusto Goncalves
5
相同的/js路由如何重定向到两个不同的目录？如果每个目录中有冲突的文件，它会如何处理？ - Jacob Ford
显示剩余4条评论
154

  1. 使用CDN的优点在于，首先它是一个分布式网络，所以速度更快，其次，浏览器缓存了静态文件，例如您网站使用的CDN的jQuery库可能已经被用户浏览器下载并缓存，因此不需要再次下载。话虽如此，提供备用方案仍然是一个好主意。

    接下来，bootstrap的npm包的重点

    是将bootstrap的javascript文件作为模块提供。正如上面提到的，这使得可以使用browserify来require它，这是最可能的使用情况，也是我理解的bootstrap发布在npm上的主要原因。

  2. 如何使用

    想象以下项目结构：

    project
|-- node_modules
|-- public
|   |-- 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（或其他喜欢的打包工具）这样的工具，在构建步骤中打包所有资产。

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

const bootstrap = require('bootstrap');

至于 css 文件，webpack 有所谓的 "loaders"。它们允许您在 js 代码中编写以下内容:

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

并且 CSS 文件将会“神奇地”包含在您的构建中。

它们将在应用程序运行时作为<style /> 标签动态添加，但您可以配置 webpack 将它们导出为单独的css文件。 您可以在 webpack 的文档中了解更多信息。

总之：

  1. 您应该使用打包工具对您的应用程序代码进行“捆绑”。
  2. 不应将node_modules或动态构建的文件提交到 Git。 您可以向 npm 添加一个build脚本，它应该用于在服务器上部署文件。 不管怎样，这可以根据您的首选构建流程以不同的方式完成。
1
我刚刚做了这个，但一直收到http://localhost:3000/bootstrap 404（未找到）的错误信息，你有什么想法吗？ - emerak
我认为“例如，用户浏览器已经下载了您的网站使用的CDN的jquery库”的可能性很小，这是一种夸张。 - user3638471
我必须说webpack的答案是正确的。但是回答OP的问题：没有一种简洁的方法来测试脚本/样式表是否已加载。HTTP/2可以通过多路复用来解决这些问题。但在大多数情况下，您可以使用webpack和defer属性来处理您的脚本或延迟加载文件。 - Tamb
72

答案 1：

  • 通过 npm（或 bower）下载 bootstrap 可以节省一些延迟时间。您获取的是本地资源而不是远程资源，速度更快，除非您使用 cdn（请查看下面的答案）。

  • "npm" 最初是为了获取 Node 模块，但随着 JavaScript 语言的发展（和 browserify 的出现），它已经稍微成长了一下。事实上，您甚至可以在 npm 上下载 AngularJS，这不是一个服务器端框架。Browserify 允许您在客户端使用 AMD/RequireJS/CommonJS，因此 node 模块可以在客户端使用。

答案 2：

如果您使用 npm install bootstrap（如果您没有使用特定的 grunt 或 gulp 文件移动到 dist 文件夹），则您的 bootstrap 将位于 "./node_modules/bootstrap/bootstrap.min.css"，如果我没记错的话。

5
您可以使用copyfiles命令并通过npm run，grunt任务或gulp任务来调用它。这样做的好处是，在构建/部署时，您不需要对"node_modules"目录进行源代码控制（只需调用"npm install"即可），而且您可以引用"styles/bootstrap.min.css"，而不是"./node_modules/bootstrap/bootstrap.min.css"。 - Bless Yahu
如果复制文件存在缺点，那自然就是你的仓库里会有两份依赖的副本。@augusto提到的静态重定向方法看起来更有效率。 - estaples
3
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接