问题1:
通过npm安装Twitter Bootstrap的确切目的是什么?我以为npm是为服务器端模块设计的。自己提供引导文件是否比使用CDN更快?
问题2:
如果我要npm安装Bootstrap,我如何指向Bootstrap .js和Bootstrap .css文件?
问题1:
通过npm安装Twitter Bootstrap的确切目的是什么?我以为npm是为服务器端模块设计的。自己提供引导文件是否比使用CDN更快?
问题2:
如果我要npm安装Bootstrap,我如何指向Bootstrap .js和Bootstrap .css文件?
如果你想重新编译/修改更少的文件/测试,请使用npm/bower安装bootstrap。使用grunt,这将更容易做到这一点,如http://getbootstrap.com/getting-started/#grunt所示。 如果你只想添加预编译的库,可以手动将文件包含到项目中。 不,你必须自己做这个或使用单独的grunt工具。如何使用Grunt.js (0.3.x)连接和缩小多个CSS和JavaScript文件
回答1:
Downloading bootstrap through npm (or bower) permits you to gain some latency time. Instead of getting a remote resource, you get a local one, it's quicker, except if you use a cdn (check below answer) "npm" was originally to get Node Module, but with the essort of the Javascript language (and the advent of browserify), it has a bit grown up. In fact, you can even download AngularJS on npm, that is not a server side framework. Browserify permits you to use AMD/RequireJS/CommonJS on client side so node modules can be used on client side.
答案2:
如果你npm安装bootstrap(如果你没有使用特定的grunt或gulp文件移动到dist文件夹),你的bootstrap将位于“./node_modules/bootstrap/bootstrap.min.css”如果我没有错的话。
The point of using CDN is that it is faster, first of all, because it is a distributed network, but secondly, because the static files are being cached by the browsers and chances are high that, for example, the CDN's jquery library that your site uses had already been downloaded by the user's browser, and therefore the file had been cached, and therefore no unnecessary download is taking place. That being said, it is still a good idea to provide a fallback. Now, the point of bootstrap's npm package is that it provides bootstrap's javascript file as a module. As has been mentioned above, this makes it possible to require it using browserify, which is the most likely use case and, as I understand it, the main reason for bootstrap being published on npm. How to use it Imagine the following project structure: 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文件。但是在你的公共/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有所谓的“加载器”。它们允许你在js代码中这样写:
require('bootstrap/dist/css/bootstrap.css');
CSS文件将“神奇地”包含在构建中。 当你的应用程序运行时,它们将被动态添加为<style />标签,但你可以配置webpack将它们导出为一个单独的css文件。你可以在webpack的文档中阅读更多。
在结论。
你应该将你的应用代码“捆绑”到一个捆绑器中 你不应该将node_modules和动态构建的文件都提交给git。你可以在npm中添加一个构建脚本,用于在服务器上部署文件。无论如何,这可以根据您喜欢的构建过程以不同的方式完成。
如果你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,你可以在需要的时候简单地更新…我想更容易些。