如何在执行yarn install或yarn add时避免bootstrap包重新构建

云上老周

2026-10-3

解决方案

你遇到的问题本质是直接修改node_modules内的依赖文件不符合包管理器的设计逻辑，Yarn 执行yarn install/yarn add时会自动校验依赖完整性，和锁文件、远程包不一致的文件会被直接覆盖。可以用以下三种方案解决：

方案1：使用patch-package持久化依赖修改（最推荐）

这是目前修改第三方依赖最通用的方案，不需要调整依赖引入逻辑

第一步：安装依赖

yarn add -D patch-package postinstall-postinstall

第二步：确保你当前node_modules/bootstrap是你精简后的最终版本，执行命令生成补丁
```
yarn patch-package bootstrap
```
执行后项目根目录会生成patches/bootstrap+xxx.patch补丁文件，把这个文件提交到代码仓库

第三步：在package.json的scripts字段中添加钩子

{
  "scripts": {
    "postinstall": "patch-package"
  }
}

后续每次执行Yarn相关的依赖安装操作后，会自动应用你生成的补丁，不会恢复被删除的组件。

方案2：将精简后的Bootstrap作为本地依赖引入

把你修改好的node_modules/bootstrap文件夹整体复制到项目根目录下，比如存放在local-libs/bootstrap

修改package.json里的bootstrap依赖声明：

{
  "dependencies": {
    "bootstrap": "file:./local-libs/bootstrap"
  }
}

之后Yarn会直接使用本地的自定义包，不会从远程拉取官方版本覆盖你的修改。

方案3：原生按需引入避免手动精简

如果你的需求只是用到Bootstrap的Modal组件，不需要手动删源码精简，直接按需引入即可实现更小的体积，更易维护：

样式层面，在你的全局scss文件中只引入Modal相关的依赖：

// 仅引入Bootstrap基础工具
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
// 仅引入Modal所需的样式
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/transitions"; // 不需要动画可以删掉这行