如何在Node项目中包含Bootstrap

Question

我有一个使用基本 npm 命令构建的 MEAN 堆栈项目。目前，使用 CDN 包含 Bootstrap：

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

我的问题是如何使用 npm 添加 bootstrap 以便项目与 CDN 包含一样工作。特别是，当我运行

npm install bootstrap

在 node_modules 中创建了一个 boostrap 目录。但是，如果我尝试从该目录中包含 bootstrap.css，它会破坏 glyphicon 字体。任何人都可以建议如何做吗？

P.S。我也会对 AngularJS 本身提出同样的问题。

Answer 1

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

Bower 为前端包管理问题提供了一个通用的、不拘一格的解决方案，同时通过 API 公开了包依赖模型，可以由更固执己见的构建堆栈使用。没有系统范围的依赖，不同应用之间没有共享依赖，依赖树是扁平的。

如果您想了解更多关于哪个更好、更可靠的知识，您也可以阅读这篇文章 link。

Why Not npm

npm 和 Bower 的主要区别在于安装包依赖项的方法。 npm 分别为每个包安装依赖项，结果生成了一个很大的包依赖树 (node_modules/grunt/node_modules/glob/node_modules/...)，其中可能有同一个包的多个版本。对于客户端 JavaScript 这是不可接受的：您不能为 jQuery 或任何其他库添加两个不同的版本到一个页面。使用 Bower，每个包都安装一次（jQuery 将始终位于 bower_components/jquery 文件夹中，无论有多少包依赖它）并且在依赖冲突的情况下，Bower 根本不会安装软件包与已安装的软件包不兼容。

Bower installation

您只需简单安装软件包

语法

npm install -g bower

您可以参考Doc以获取完整信息。

例如：

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.use(express.static(path.join(__dirname, 'bower_components')));

Now you can use simply in your index.html file

<!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

具有 app.js 文件的目录结构

普通Html文件

如何在Node项目中包含Bootstrap

How Does One Include Bootstrap in Node Project

javascript

node.js

twitter-bootstrap

npm

npm-install