如何在节点项目中包含Bootstrap ?

I have a MEAN stack project that was scaffolded using the basic npm command. At the moment, the Bootstrap is included using CDN:

我有一个使用基本的npm命令构建的平均堆栈项目。目前，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目录。但是，如果我尝试包含引导程序。css从那个目录，它打破了字形字体。有人能建议怎么做吗?

P.S. I would also pose the same question regarding the AngularJS itself.

另外，我也想就盎格鲁人本身提出同样的问题。

1 个解决方案

#1

You can use the browser package manager i.e bower

您可以使用浏览器包管理器i。e鲍尔

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 link also.

如果你想了解更多关于哪些是更好和可靠的信息，你也可以阅读这个链接。

Why Not npm

为什么不npm

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/jquery folder, 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 Doc for complete information.

您可以向Doc查询完整的信息。

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

现在可以在索引中使用。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文件

#1