如何在节点项目中包含引导程序 [英] How Does One Include Bootstrap in Node Project
问题描述
我有一个使用基本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本身提出同样的问题。
您可以使用浏览器包管理器，即
普通Html文件
I have a MEAN stack project that was scaffolded using the basic npm command. At the moment, the Bootstrap is included using 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 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?
P.S. I would also pose the same question regarding the AngularJS itself.
You can use the browser package manager i.e bower
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.
If you want more Knowledge about which is better and reliable you read this link also.
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.
Bower installation
You just simple install the packages
Syntax
npm install -g bower
You can refer the Doc for complete information.
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.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
Directory structure with app.js file
Normal Html File
这篇关于如何在节点项目中包含引导程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
