6.4 构建工具与框架集成迁移

6.4 构建工具与框架集成迁移

三案并审：构建案（用 Vite 之类的现代打包器跑通 Sass 流水线与按需引入）、集成案（在 React、Vue 里用 Bootstrap 的两种姿势与选型判据）、迁移案（4 升 5 的清单化操作）。三者共同点是「工程化收口」——把前几章手工执行的步骤固化成流水线。

位置：进阶章收官。5.1 的编译、6.3 的裁剪在本节进入工具链；版本迁移案则回收 1.1 的版本演化知识，把它变成可执行清单。

构建案：Sass 流水线入列

// 现代构建工具（以 Vite 一族为例）的项目入口配置思路：
// 一、样式入口指向你的定制 scss（5.1 的覆盖层加按需引入），
//     构建器识别 scss 依赖自动装配编译器，无需手工跑编译命令；
// 二、脚本入口按插件粒度 import（6.3 第二刀）；
// 三、生产构建开启压缩与代码分割，交互插件跟随动态 import 拆包。
​

// 工程里的定制入口（与 5.1 完全同构，只是由构建器代为编译）
// 设计令牌层：项目自有变量与 Bootstrap 变量的「翻译层」
$primary: #6a4fc4;
$enable-negative-margins: true;   // 需要负值工具类时在编译期打开开关

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
// ...按需功能件（grid、buttons、card 等）
@import "bootstrap/scss/utilities/api";
​

工程化后的三个红利：编译自动化（保存即编译）、差异可见（升级 Bootstrap 版本时编译产物 diff 立现）、团队一致（定制入口进版本库，人人编译出同一份 CSS）。

集成案：在 React 与 Vue 里用 Bootstrap

姿势一：直用原生包。框架渲染的也是 DOM，class 照写、样式照引，交互插件在组件挂载后初始化（React 的 effect、Vue 的 onMounted 里 getOrCreateInstance），卸载时 dispose。适合：以静态展示为主、交互组件少的页面。

姿势二：用社区封装库（React 生态有 react-bootstrap 与 Reactstrap 两支，Vue 生态有 bootstrap-vue-next 一支，均以组件形式重封装）。适合：重度使用 modal、dropdown、tooltip 的单页应用——封装库替你管理了实例生命周期与受控属性。

// 姿势二的典型形态（示意，概念适用于各家封装库）：
// 组件当标签用，状态当属性传，实例生命周期由库托管
function Demo() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button variant="primary" onClick={() => setOpen(true)}>删除</Button>
      <Modal show={open} onHide={() => setOpen(false)} centered>
        <Modal.Header>确认</Modal.Header>
        <Modal.Body>此操作不可撤销。</Modal.Body>
      </Modal>
    </>
  );
}
​

选型判据三条：封装库的版本必须与 Bootstrap 大版本同步（落后一个大版本意味着新组件与新工具类缺失）；体积账要重算（封装库自身有运行时，6.3 的预算表要加一行）；定制链路是否兼容（你的 Sass 定制产物能否被封装库引用——能，因为封装库多数不带样式，样式仍从你的管线出）。

⚠️ 常见坑：在单页框架里 jQuery 时代的「操作 DOM 再重新初始化插件」直觉要整个丢掉——5.x 组件实例与 DOM 节点绑定，框架虚拟 DOM 重渲染后旧实例指向的节点可能已被替换。一律 getOrCreateInstance 按节点取、卸载时 dispose，别在渲染函数里反复 new。

迁移案：4 升 5 的清单化操作

1.1 节判过版本差异，这里变成可执行清单（小项目半天、大项目按周计）：

清单之外两判：分步走（先迁栅格与工具类语法，再迁数据属性，最后移除 jQuery，每步可独立验证，对应 1.1 的变式）；迁移期双跑（新旧两套样式短共存会打架，隔离到路由级或页面级再切换，别全站半迁移）。

案例：五人团队的构建迁移周

背景：团队从「CDN 引全量、手写覆盖」迁到「npm 加 Vite 加 Sass 定制」。代码库里散落着三十七个 style 块、两处互相冲突的 primary 定义。

操作：第一步，装工具链，把三十七个 style 块收编为三个层级文件（令牌层、组件覆盖层、页面补丁层），冲突的 primary 在收编时当场对齐为一处；第二步，接 5.1 的定制入口，全量 CSS 先原样产出（零行为变化上线）；第三步，逐周执行 6.3 的裁剪（CSS 按需、JS 按插件），每周对比预算表。

结果：三周后传输体积降 62%，样式冲突工单清零；「改一个颜色要全局搜」变成「改一个变量重编译」。

解读：迁移的关键节奏是**「先收编、再裁剪」**——第一步不改变任何行为，只把散装样式归档；行为零变化上线后，后续每一步都有干净的基线可对比。反过来「边迁边改」会让问题归因变得不可能。

变式：若团队还要引入 Vue 或 React，判给封装库姿势时把本案例的令牌层直接复用——样式管线与框架解耦，正是 5.1 起就埋好的架构红利。

结案要点

• 构建案红利：自动编译、升级 diff 可见、团队产出一致；
• 集成两姿势：轻交互直用原生包（getOrCreateInstance 加 dispose），重交互上封装库（认准版本同步、体积入账、样式仍走自己的管线）；
• 迁移七项清单，方向类改名（ml 到 ms）与数据属性改前缀是两大雷区；
• 迁移纪律：分步走、双跑隔离、先收编再裁剪。

进阶章结案。最后一章回到断点主线，从零做一个完整页面。