通过npm安装Twitter Bootstrap的目的？

Question

问题1:

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

问题2:

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

Answer 1

如果你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>

我不会直接从timetowonder 提出的 server.js文件所在的文件夹(通常与node_modules相同)提供页面,这样人们就可以访问你的server.js文件了.

当然,您只需下载并复制并粘贴到您的文件夹,但使用NPM,您可以在需要时更新......我认为更容易.

Answer 2

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

   现在,bootstrap的npm包的重点

   是它提供bootstrap的javascript文件作为模块.如上所述,这使得它可以require使用browserify,这是最可能的用例,并且据我所知,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文件是正确的.但是在bootstrap.js文件中的某个地方包含这样的文件要好得多public/js/*.js:

var bootstrap = require('bootstrap');

并且您只将此代码包含javascript在您实际需要的文件中bootstrap.js.Browserify负责为您提供此文件.

现在,缺点是您现在将前端文件作为node_modules依赖项,并且node_modules通常不会检入该文件夹git.我认为这是最有争议的部分,有很多意见和解决方案.

更新2017年3月

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

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

Answer 3

答案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"中.