题 通过npm安装Twitter Bootstrap的目的?


问题1:

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

问题2:

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


180
2017-11-06 07:17


起源


我能想到的主要用例是使用 Browserify 为您的前端JS开发。 - cvrebert
@cvrebert:感谢提供tl;博士回答:) - Ivan Durst


答案:


  1. 使用CDN的关键在于它 更快首先,因为它是一个 分散式 网络,但其次,因为浏览器正在缓存静态文件而且机会很高,例如,CDN的 jquery 您的网站使用的库已经被用户的浏览器下载,因此该文件已被缓存,因此没有进行不必要的下载。话虽如此,它仍然是一个好主意 提供后备

    现在,bootstrap的npm包的重点

    是它提供bootstrap的 JavaScript的 档案作为 。如上所述,这使得它成为可能 require 它使用 browserify,这是最可能的用例,据我所知,bootstrap在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.jsBrowserify 负责为您提供此文件。

现在,缺点是你现在有你的前端文件 node_modules 依赖关系,和 node_modules 文件夹通常不会签入 git。我认为这是最有争议的部分,有很多 意见 和 解决方案


2017年3月更新

自从我写完这个答案并且更新到位以来差不多两年了。

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

108
2018-05-28 10:53



我刚刚做了这个,但一直在努力 本地主机:3000 /引导 404(Not Found),对此有何想法? - emerak
这应该是公认的答案。 - Chuck Le Butt
我会说“例如,你的网站使用的CDN的jquery库已被用户的浏览器下载”的可能性很高,这是夸大其词
我不得不说webpack答案是正确的。但是要回答OP问题:没有简洁的方法来测试是否加载了脚本/样式表。 HTTP / 2可以通过多路复用解决这些问题。但在大多数情况下,你可以使用webpack和 defer 您的脚本或延迟加载文件的属性 - Tamb


如果你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,您可以在需要时更新......我认为更容易。


160
2018-02-23 14:48



帮助了我很多,谢谢!! - TheRimalaya
对于那些使用由web storm生成的快速节点项目的人,您需要在app.js中添加代码 - rottenoats
最好的答案! - thiagoh
我从未建议将静态前端文件与服务器文件一起保存。 - timetowonder
在加载js文件或在ready处理程序内部时,您是否对app进行了这些调用? - pupeno


答案1:

  • 通过npm(或bower)下载引导程序可以获得一些延迟时间。除了获得远程资源,你得到一个本地的,它更快,除非你使用cdn(检查下面的答案)

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

答案2:

如果您使用npm install bootstrap(如果您不使用特定的grunt或gulp文件移动到dist文件夹),如果我没有错,您的引导程序将位于“./node_modules/bootstrap/bootstrap.min.css”中。


71
2017-11-06 07:49



你可以用一个 复制命令 并通过一个 npm跑, 笨蛋的任务, 要么 吞咽任务。这样做,我不需要控制“node_modules”(在构建/部署时只调用“npm install”)目录,我可以引用“styles / bootstrap.min.css”而不是“./node_modules/bootstrap”。 /bootstrap.min.css”。 - Bless Yahu
如果复制文件有不利之处,那么你的repo中有两个依赖项副本。 @augusto提到的静态重定向方法看起来更有效。 - estaples


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

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


3
2017-11-06 07:45