Angular 8中修改rb-fab-speed-dial包后生产构建失效的解决方案咨询

这种维护停滞的npm包确实让人头疼，不过有几个靠谱的办法能解决你的问题，不用去碰打包后的bundle文件：

方法1：使用patch-package打本地补丁（最推荐） #

这个工具专门用来给npm包添加自定义补丁，每次npm install或者构建时都会自动应用你的修改，完美适配你的场景：

1. 首先安装patch-package和它的依赖：

   npm install patch-package postinstall-postinstall --save-dev
   

2. 去node_modules/rb-fab-speed-dial里修改你需要的内容（把mat-fab换成mat-mini-fab，调整CSS）。
3. 生成补丁文件：

   npx patch-package rb-fab-speed-dial
   

   这会在项目根目录生成一个patches文件夹，里面保存着你的修改记录。
4. 修改package.json的scripts，添加一个postinstall脚本，确保每次安装依赖后自动应用补丁：

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

5. 现在不管是npm install还是ng build --prod，构建过程都会自动使用你修改后的包代码了。记得把patches文件夹提交到代码仓库里，团队其他人拉代码后也能自动生效。

方法2：将包代码复制到本地，作为项目组件使用 #

如果包的结构比较简单，直接把它的源码搬到自己项目里改，完全脱离原npm包的约束：

1. 找到node_modules/rb-fab-speed-dial文件夹，把里面的所有文件复制到你的Angular项目里，比如src/app/components/rb-fab-speed-dial。
2. 对复制过来的代码进行修改（替换mat-fab、调整CSS）。
3. 修改你的Angular模块，把原来引入的RbFabSpeedDialModule换成你本地的组件模块：

   // 原来的引用
   // import { RbFabSpeedDialModule } from 'rb-fab-speed-dial';
   // 换成本地组件的引用
   import { RbFabSpeedDialModule } from './components/rb-fab-speed-dial/rb-fab-speed-dial.module';
   

4. 之后构建项目时，就会直接使用你本地修改后的组件代码，完全不受原npm包的影响。

方法3：自建仓库维护修改后的包（适合长期维护） #

如果想长期维护这个修改后的版本，哪怕原包没有公开GitHub源码，也可以自己建仓库：

1. 先下载原npm包的源码包：

   npm pack rb-fab-speed-dial
   

   这会生成一个.tgz格式的压缩包，解压它就能得到完整的包源码。
2. 把解压后的代码上传到你自己的GitHub/GitLab仓库。
3. 在你的Angular项目里，替换原包的依赖为你自己的仓库地址：

   npm uninstall rb-fab-speed-dial
   npm install git+https://github.com/你的用户名/你的仓库名.git --save
   

4. 之后你可以在自己的仓库里持续修改代码，项目构建时会自动拉取你仓库里的最新版本。如果需要更新，直接推仓库然后在项目里执行npm update 你的包名即可。

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