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

Question

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

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

我的问题是如何使用npm添加引导程序，以便项目与CDN包含相同。 特别是，当我跑

npm install bootstrap

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

PS我也会提出与AngularJS本身相同的问题。

Answer 1

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

Bower为前端软件包管理问题提供了一个通用的，不受影响的解决方案，同时通过一个可以被更具见解性的构建堆栈使用的API公开软件包依赖模型。 没有系统范围的依赖关系，不同应用程序之间不共享依赖关系，并且依赖关系树是平坦的。

如果您想了解哪些更好，更可靠，您还可以阅读此链接。

为什么不是npm

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

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

问题描述

1 个解决方案

解决方案1
16 已采纳 2016-06-11 03:52:14

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

问题描述

1 个解决方案

解决方案1 16 已采纳 2016-06-11 03:52:14

解决方案1
16 已采纳 2016-06-11 03:52:14