twitter-bootstrap Node项目中如何引入Bootstrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37759681/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How Does One Include Bootstrap in Node Project
提问by MadPhysicist
I have a MEAN stack project that was scaffolded using the basic npm command. At the moment, the Bootstrap is included using CDN:
我有一个使用基本 npm 命令搭建的 MEAN 堆栈项目。目前，Bootstrap 包含在 CDN 中：
link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css')
My question is how can I add bootstrap using npm so the project works same as with CDN inclusion. In particular, when I run
我的问题是如何使用 npm 添加引导程序，以便项目与 CDN 包含相同。特别是，当我跑步时
npm install bootstrap
a boostrap directory is created within node_modules. However, if I try to include the bootstrap.css from that directory, it breaks the glyphicon fonts. Could anyone advise on how to do it?
在 node_modules 中创建了一个 boostrap 目录。但是，如果我尝试从该目录中包含 bootstrap.css，它会破坏 glyphicon 字体。任何人都可以就如何做到这一点提出建议吗？
P.S. I would also pose the same question regarding the AngularJS itself.
PS 我也会对 AngularJS 本身提出同样的问题。
回答by Akhilesh Singh
You can use the browser package manager i.e bower
您可以使用浏览器包管理器即 bower
Bower offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.
Bower 为前端包管理问题提供了一个通用的、独立的解决方案，同时通过一个 API 公开包依赖模型，这个 API 可以被一个更有主见的构建堆栈使用。没有系统范围的依赖，不同应用之间没有共享依赖，依赖树是扁平的。
If you want more Knowledge about which is better and reliable you read this linkalso.
如果您想了解更多关于哪个更好更可靠的知识，您也可以阅读此链接。
The main difference between npm and Bower is the approach for installing package dependencies. npm installs dependencies for each package separately, and as a result makes a big package dependency tree (node_modules/grunt/node_modules/glob/node_modules/...), where there could be several version of the same package. For client-side JavaScript this is unacceptable: you can't add two different version for jQuery or any other library to a page. With Bower each package is installed once (jQuery will always be in the bower_components/jqueryfolder, regardless of how many packages depend on it) and in the case of a dependency conflict, Bower simply won't install the package incompatible with one that's already installed.
npm 和 Bower 之间的主要区别在于安装包依赖项的方法。npm 分别为每个包安装依赖项，因此会生成一个大的包依赖项树(node_modules/grunt/node_modules/glob/node_modules/...)，其中可能有同一个包的多个版本。对于客户端 JavaScript，这是不可接受的：您不能将两个不同版本的 jQuery 或任何其他库添加到页面。使用 Bower，每个包都安装一次（jQuery 将始终在bower_components/jquery文件夹中，无论有多少包依赖它）并且在依赖冲突的情况下，Bower 不会安装与已经安装的包不兼容的包。
Bower installation
凉亭安装
You just simple install the packages
您只需简单地安装软件包
Syntax
句法
npm install -g bower
You can refer the Docfor complete information.
您可以参考文档以获取完整信息。
For Example:
例如：
Directory structure
目录结构
project Folder
+ bower_components
+ bootstrap
+ dist
+ css
+ bootstrap.css
+ jquery
+ jquery.js
+ public
+ index.html
+ app.js
Now you can set the static path in app.js
现在你可以在 app.js 中设置静态路径
app.use(express.static(path.join(__dirname, 'bower_components')));
Now you can use simply in your index.html file
现在你可以简单地在你的 index.html 文件中使用
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<link rel='stylesheet' href='/bootstrap/dist/css/bootstrap.css' />
</head>
<body>
{{{ yield }}}
</body>
<script src="/bootstrap/dist/jquery/jquery.js"></script>
</html>
Screenshots
截图
Directory structure with app.js file
app.js 文件的目录结构
Normal Html File
普通 Html 文件
