如何在节点项目中包含引导程序

我有一个使用基本npm命令脚手架的MEAN堆栈项目。 目前,Bootstrap包含在CDN中:

link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css') 

我的问题是我怎样才能使用npm添加bootstrap,所以这个项目和CDN包含的一样。 特别是当我跑步的时候

 npm install bootstrap 

在node_modules中创build一个boostrap目录。 但是,如果我尝试从该目录中包含bootstrap.css,则会破坏glyphicon字体。 任何人都可以build议如何做到这一点?

PS我也会对AngularJS本身提出同样的问题。

您可以使用浏览器软件包pipe理器即凉亭

Bower为前端程序包pipe理问题提供了一个通用的,未经select的解决scheme,同时通过一个可以被更多自以为是的构build栈使用的API公开包程序依赖模型。 没有系统范围的依赖关系,在不同的应用程序之间不存在依赖关系,依赖关系树是平坦的。

如果你想知道哪些更好更可靠,你也可以阅读这个链接 。

为什么不是npm

npm和Bower之间的主要区别在于安装软件包相关性的方法。 npm分别安装每个软件包的依赖关系,结果会产生一个大的软件包依赖关系树(node_modules/grunt/node_modules/glob/node_modules/...) ,其中可能有多个版本的相同软件包。 对于客户端JavaScript来说,这是不可接受的:不能为jQuery或任何其他库添加两个不同版本的页面。 使用Bower,每个软件包只安装一次(jQuery将永远在bower_components/jquery文件夹中,无论有多less软件包依赖于它),并且在依赖性冲突的情况下,Bower根本不会安装与已经不兼容的软件包安装。

凉亭安装

你只需简单地安装软件包

句法

 npm install -g bower 

您可以参考该文件的完整信息。

例如:

目录结构

 project Folder + bower_components + bootstrap + dist + css + bootstrap.css + jquery + jquery.js + public + index.html + app.js 

现在你可以在app.js中设置静态path

 app.use(express.static(path.join(__dirname, 'bower_components'))); 

现在,您只需在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> 

截图

目录结构与app.js文件 在这里输入图像描述

正常的Html文件 在这里输入图像描述