如何将 Bootstrap 添加到您的 Node.js 项目中
这篇文章最初发表在我的博客上。
如果您正在使用 Node.js 构建应用程序，并且觉得需要一款工具来帮助您增强用户界面，那么本文正是为您准备的。它将一步一步地指导您如何为Bootstrap您的应用程序添加功能Nodejs。
Hello the World让我们创建一个简单的应用程序，其中包含Bootstrap 中的文本jumbotron。
初始项目
创建一个简单的Node项目，就像下面这样。
这里没什么特别的。为你的项目创建一个文件夹，并将其初始化为 Node 项目npm init -y。创建服务器文件app.js（touch app.js），以及其他目录（mkdir views）。
让我们来安装express和配置一个轻量级的Node服务器。
npm i express或者yarn add express。
现在我们可以创建基本服务器了。
const express = require("express")
const path = require('path')
const app = express();
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, 'views/index.html'))
});
app.listen(5000, () => {
console.log('Listening on port ' + 5000);
});
我们正在监听端口5000并提供文件服务index.html。请确保您已创建该文件并添加一些html内容。
启动服务器（node app.js），看看一切是否正常。如果正常，我们继续进行下一会话。
添加 Bootstrap CSS
我建议的第一个解决方案是使用CDN。以下是具体操作方法。
点击此处复制 Bootstrap CSS 以及其他 JS 文件，并将它们粘贴到您的 index 文件中。
使用 CDN
现在是时候修改我们的代码index.html，以便添加 Bootstrap CSS 了。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Hello, the world!</title>
</head>
<body>
<div class="jumbotron">
<div class="container"><h1>Hello, the world!</h1></div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
我添加了两个 Bootstrap 类：container和jumbotron。
重启服务器，然后去检查Bootstrap页面上是否显示（看看是否有流体巨幕）。
这个方案不错，但离线使用时会受到限制。所以我希望你测试一下下一个方案。
使用npm
首先，你需要安装软件包，这些软件包是bootstrap（可选）jquery。
npm i bootstrap jquery --save
要使用这些文件，我们需要修改我们的程序app.js，使其能够为我们提供这些文件。
// app.js
const express = require("express")
const path = require('path')
const app = express();
app.use('/css', express.static(path.join(_dirname, 'node_modules/bootstrap/dist/css')))
app.use('/js', express.static(path.join(_dirname, 'node_modules/bootstrap/dist/js')))
app.use('/js', express.static(path.join(_dirname, 'node_modules/jquery/dist')))
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, 'views/index.html'))
});
app.listen(5000, () => {
console.log('Listening on port ' + 5000);
});
多亏了这些，express.static()我们才能顺利提供服务Bootstrap。
Bootstrap现在我们可以在HTML页面中通过链接到它来使用它<link rel="stylesheet" href="./css/bootstrap.min.css">。
结论
本文介绍了两种不同的项目集成方式Bootstrap。Nodejs第一种是使用官方方案CDN，第二种是使用第三方方案npm。如果您在本地（离线）工作，后一种方案更为合适。
在Node项目中使用Bootstrap还有其他方法吗？请与我们分享！
如果您喜欢这篇文章，请点赞或点独角兽，或在Twitter上关注我，或访问我的博客阅读更多文章。文章来源：https://dev.to/kaliacad/how-to-add-bootstrap-to-your-nodejs-project-ngc