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

时间：2016-06-11 03:42:25

标签： javascript node.js twitter-bootstrap npm npm-install

我有一个使用基本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字体。有人可以建议怎么做吗？

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

1 个答案:

答案 0 :(得分：16)

您可以使用浏览器包管理器，即 的 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安装

您只需简单安装软件包

语法

npm install -g bower

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

例如：

  

目录结构 

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文件的目录结构 enter image description here

普通的Html文件 enter image description here

相关问题
最新问题