如何在Node项目中引入Bootstrap？

Question

如何在Node项目中引入Bootstrap？

javascriptnode.jstwitter-bootstrapnpmnpm-install

18

我有一个使用基本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中创建了一个bootstrap目录。然而，如果我试图从该目录包含bootstrap.css，则会破坏glyphicon字体。有人可以建议如何做吗？

附言：关于AngularJS本身，我也会提出同样的问题。

- MadPhysicist

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Akhilesh Singh · Accepted Answer

您可以使用浏览器包管理器，例如bower

Bower提供了一个通用的、不倾向于任何特定解决方案的前端包管理方法，并通过API公开了包依赖模型，这个模型可以被更具倾向性的构建堆栈所使用。没有系统级别的依赖关系，不同应用程序之间没有共享的依赖关系，而且依赖关系树是扁平的。

如果您想了解哪种更好和可靠，请阅读此链接。

为什么不使用npm

npm和Bower的主要区别在于安装包依赖的方法。npm为每个包单独安装依赖项，并且因此创建了一个大型的包依赖树(node_modules/grunt/node_modules/glob/node_modules/...)，其中可能有几个相同包的不同版本。对于客户端JavaScript来说，这是不可接受的：您无法将两个不同版本的jQuery或任何其他库添加到页面上。而使用Bower，每个包只被安装一次（无论有多少个依赖它，jQuery始终在bower_components/jquery文件夹中），并且在依赖冲突的情况下，Bower不会安装与已经安装的包不兼容的包。

Bower安装

您只需要简单地安装包即可

语法

npm install -g bower

您可以参考文档获取完整信息。 例如：

目录结构

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

现在您可以在 app.js 中设置静态路径。

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文件