在作为插件的前端工程中引入 Bootstrap

先介绍一下背景。最近我在做一个 Cumulocity 平台的项目，这个项目要求使用 Angular 开发。平台本身提供了一个脚手架，但是这个脚手架是高度封装的，并不具备完整的 Angular 工程项目结构。

问题在于 Angular 本身的组件库如 Material 等能够实现的效果比较少，很难使用一个 UI 库同时满足所有的页面设计需求。更加重要的问题在于：产品要求页面具有响应式，也就是说在手机、平板等终端设备上也能够得到良好的展示。

基于以上需求和问题，需要在脚手架项目中引入 bootstrap. 因为如果所有的代码或者响应式都是从头来写，工作量过大并且容易写到最后把自己坑了（就是缺乏规范导致命名等相互冲突、矛盾等问题）。

1. 下载 Bootstrap 相关文件

到官网Download · Bootstrap v5.1 | Bootstrap官方文档中国镜像 (getbootstrap.cn) 上点击下载按钮就可以下载打包之后的 bootstrap 相关的 css 和 js 文件了！

下载完毕然后解压之后得到下面的目录：

这里面存放的是所有的相关文件，但并不是所有的文件都是我们需要的。这里我们只取符合需求的，具体说来，就是在 css 目录下面找到这个文件：

而对于 js 文件，我们的目标文件是这个：

2. 将样式文件放在合适的位置

正如之前说的那样，脚手架不是完整的 Angular 工程化项目，所以参考官方的说明文件，自定义的样式文件都应该被加载到 branding/branding.less 中:

为此我们在根目录下创建名为 styles 的目录，然后将刚才说的下载好的目标样式文件放入这个文件夹中，并改名为 bootstrap.css 如下所示：

其中 material.less 是 Material UI 组件库相关的样式文件，其实也是通过这样的方式进行加载的！

3. 样式文件加载

在 branding/branding.less 中加载 styles 下面的样式。

4. 将脚本文件放在合适的位置

和样式文件不同，脚手架没有提供前置脚本的执行入口，因此只能想别的办法了。这里我们稍微理解一下 bootstrap 生效的原理：本质上就是 bootstrap 相关的样式文件和脚本文件的执行。而刚才已经处理了 css 相关的文件。现在只需要让选好的脚本文件得到执行就可以了。为此创建根目录下面的预执行目录 preset, 并在其中放入选好的 js 文件，并改名为 bootstrap.ts:

而 ootstrap.ts中的结构为：

ts 复制代码

// @ts-nocheck
...
...
...
export {}

省略号的位置是用来复制选好的 js 文件的内容的！大概长这样：

js 复制代码

/*!
  * Bootstrap v5.1.3 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
        typeof define === 'function' && define.amd ? define(factory) :
            (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.bootstrap = factory());
})(this, (function () {
    'use strict';

我们找到脚手架的默认路由对应的模块，假如此模块对应的是 homepage 模块，那么就在此模块的 index.ts 中执行:

ts 复制代码

export * from './homepage.module';
import '../preset/bootstrap';

homepage 相关的目录为：

5. 检查效果

一般来说使用 Bootstrap 提供的 Collapse 组件就能够同时检测 css 和 js 是否正常加载了。

html 复制代码

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

本文就到此结束了，希望你通过这个小案例能够帮助你对 bootstrap 的引入和使用有更加深入的理解。