如何将npm安装的Bootstrap及其依赖从node_modules引入Node-Express应用

下面提供两种常用的落地方式，可根据项目复杂度选择：

方案1：直接配置静态资源托管（无需额外打包工具） #

适合小型项目，不需要额外接入前端工程化工具：

• 首先在Express入口文件（通常为app.js/index.js）中添加静态资源托管规则，将对应依赖的生产版文件目录映射到公开路由：

const express = require('express');
const app = express();

// 自定义路由前缀映射对应依赖的dist目录，可根据需求修改路由前缀
app.use('/vendor/bootstrap', express.static(__dirname + '/node_modules/bootstrap/dist'));
app.use('/vendor/jquery', express.static(__dirname + '/node_modules/jquery/dist'));
app.use('/vendor/popper', express.static(__dirname + '/node_modules/@popperjs/core/dist/umd'));

• 之后在页面模板（HTML/EJS/Pug等）中按顺序引入资源即可：

<!-- 引入Bootstrap样式 -->
<link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">
<!-- 引入JS，注意优先级：jQuery > Popper > Bootstrap -->
<script src="/vendor/jquery/jquery.min.js"></script>
<script src="/vendor/popper/popper.min.js"></script>
<script src="/vendor/bootstrap/js/bootstrap.min.js"></script>

方案2：通过前端打包工具整合（适合中大型项目） #

如果项目已经接入webpack/vite等打包工具，可直接在前端入口文件中导入依赖，打包后统一引入：

• 在前端JS入口文件（例如src/main.js）中导入所有依赖：

// 导入Bootstrap样式
import 'bootstrap/dist/css/bootstrap.min.css'
// 导入依赖，bootstrap.bundle.min.js已内置popper，无需单独导入popper
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
import $ from 'jquery'

// 如需全局使用jQuery，可挂载到window对象上
window.$ = window.jQuery = $

• 打包完成后，直接在模板中引入打包输出的CSS、JS文件即可，无需单独托管node_modules目录。

提示：若使用Bootstrap 5的bundle版本JS，已内置popper.js依赖，无需单独安装、引入popper即可正常使用所有组件功能。

内容的提问来源于stack exchange，提问作者sisonke