如何在Node项目中包含Bootstrap
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 添加 bootstrap 以便项目与 CDN 包含一样工作。特别是,当我 运行
npm install bootstrap
在 node_modules 中创建了一个 boostrap 目录。但是,如果我尝试从该目录中包含 bootstrap.css,它会破坏 glyphicon 字体。任何人都可以建议如何做吗?
P.S。我也会对 AngularJS 本身提出同样的问题。
您可以使用浏览器包管理器,即
bower
Bower 为前端包管理问题提供了一个通用的、不拘一格的解决方案,同时通过 API 公开了包依赖模型,可以由更固执己见的构建堆栈使用。没有系统范围的依赖,不同应用之间没有共享依赖,依赖树是扁平的。
如果您想了解更多关于哪个更好、更可靠的知识,您也可以阅读这篇文章 link。
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文件
我有一个使用基本 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 本身提出同样的问题。
您可以使用浏览器包管理器,即 bower
Bower 为前端包管理问题提供了一个通用的、不拘一格的解决方案,同时通过 API 公开了包依赖模型,可以由更固执己见的构建堆栈使用。没有系统范围的依赖,不同应用之间没有共享依赖,依赖树是扁平的。
如果您想了解更多关于哪个更好、更可靠的知识,您也可以阅读这篇文章 link。
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文件