如何编译仅含offcanvas.js和dropdown.js的自定义bootstrap.min.js？

前置要求 #

• 已安装Node.js（npm随Node.js自带）
• 了解基础终端命令操作

方案一：用Webpack快速打包（推荐） #

这是官方推荐的方式，适合长期维护的项目：

1. 初始化项目并安装依赖
   新建空文件夹，打开终端执行：

   npm init -y
   npm install bootstrap webpack webpack-cli --save-dev
   

2. 创建入口JS文件
   在项目根目录新建src/index.js，只导入所需模块（注意必须包含组件依赖的基础工具）：

   // Bootstrap组件依赖的基础工具模块
   import 'bootstrap/js/dist/util';
   import 'bootstrap/js/dist/dom/event-handler';
   import 'bootstrap/js/dist/dom/manipulator';
   import 'bootstrap/js/dist/dom/selector-engine';
   // 导入你需要的两个组件
   import 'bootstrap/js/dist/dropdown';
   import 'bootstrap/js/dist/offcanvas';
   

3. 配置Webpack
   根目录新建webpack.config.js，配置打包输出：

   const path = require('path');
   
   module.exports = {
     entry: './src/index.js',
     output: {
       filename: 'my.bootstrap.min.js',
       path: path.resolve(__dirname, 'dist'),
     },
     mode: 'production', // 自动启用代码压缩
   };
   

4. 添加打包命令并执行
   打开package.json，在scripts字段中添加：

   "scripts": {
     "build": "webpack"
   }
   

   终端执行：

   npm run build
   

   打包完成后，dist目录下的my.bootstrap.min.js就是你要的文件。

方案二：手动拼接+压缩（适合快速需求） #

如果不想用打包工具，直接操作Bootstrap源码：

1. 获取Bootstrap源码文件
   下载Bootstrap源码包，解压后找到js/dist文件夹，里面是各个拆分好的JS模块。

2. 手动拼接文件
   新建my.bootstrap.js，按以下顺序复制内容：

   • 先复制util.js、event-handler.js、manipulator.js、selector-engine.js的全部内容（这四个是Dropdown和Offcanvas的依赖）
   • 再复制dropdown.js、offcanvas.js的全部内容

3. 压缩文件
   安装terser（专业JS压缩工具）：

   npm install terser -g
   

   终端执行压缩命令：

   terser my.bootstrap.js -o my.bootstrap.min.js
   

功能验证 #

在HTML中引入打包后的文件，测试组件功能：

<!-- 测试Dropdown -->
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    下拉菜单
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">选项1</a></li>
  </ul>
</div>

<!-- 测试Offcanvas -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demoOffcanvas">
  打开侧边栏
</button>
<div class="offcanvas offcanvas-start" id="demoOffcanvas">
  <div class="offcanvas-header">
    <h5>侧边栏标题</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
</div>

<script src="./my.bootstrap.min.js"></script>

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