如何将Angular 1项目的依赖从Bower组件迁移至Node模块

迁移前准备 #

• 锁定现有依赖版本：提取当前线上环境bower_components中所有依赖的实际运行版本，整理成精确版本清单，不要直接使用bower.json中的范围版本，避免迁移时版本跳变引发兼容性问题。
• 备份现有配置：将bower.json、.bowerrc和整个bower_components目录提交到单独的备份分支，出现问题可快速回滚。
• 准备和生产配置完全一致的本地测试环境，所有迁移操作先在测试环境验证再同步到生产分支。

迁移实施步骤 #

第一步：初始化npm配置 #

• 项目根目录执行npm init -y生成package.json，已有配置则跳过。
• 遵循逐个迁移、先易后难的原则：先迁移无Angular依赖的工具类库（如lodash、moment），再迁移Angular生态插件（如angular-route、angular-animate），最后迁移核心angular包。
• 安装依赖时指定精确版本，比如原项目用的是Angular 1.8.2，就执行npm install angular@1.8.2 --save，不要加^、~等版本范围符，避免自动安装更高的不兼容版本。

第二步：调整资源引入路径 #

• 把原有代码/构建配置中bower_components/xxx/xxx.min.js格式的引入路径，替换为node_modules/xxx/xxx.min.js。如果使用gulp、grunt、webpack等构建工具，要同步修改构建配置里的资源扫描目录，移除bower_components路径，加入对应node_modules路径。
• 如果配置了CDN fallback规则，同步修改本地兜底资源的路径为node_modules下的对应文件。

第三步：单步验证 #

• 每迁移完1-2个依赖，就启动测试环境跑全量单元测试、E2E测试，同时手动验证对应功能模块是否正常运行，确认无问题再迁移下一个依赖。
• 若出现依赖找不到的问题，优先核对npm包的目录结构和原有Bower包是否一致，部分老旧包的npm版本和Bower版本的入口文件路径不同，手动调整引入路径即可。
• 若出现兼容性问题，先确认安装的版本是否和原有Bower版本完全一致，版本一致仍有问题的可以暂时把该依赖回退到Bower引入，记到问题清单等其他依赖迁完后单独排查。

第四步：全量验证和清理 #

• 所有依赖迁移完成后，把bower_components目录从构建配置、.gitignore中移除，删除bower.json和.bowerrc文件。
• 执行一次完整的生产构建，对比构建产物的大小、功能和迁移前的生产产物是否一致，无差异则先发布到预发环境做灰度验证，灰度验证通过再全量上线。

避坑提示 #

• 部分老旧的Angular 1生态插件可能没有发布npm包，可把原有Bower中的对应包存到项目本地vendor目录引入即可，不需要强行迁移npm。
• 不要随意升级依赖版本，Angular 1已经停止维护，很多相关生态的高版本已经不再兼容Angular 1，严格锁定原有版本是最稳妥的方案。
• 如果是无构建工具的静态项目，不要把整个node_modules目录部署到线上，只需要把用到的依赖文件拷贝到静态资源目录即可。

内容的提问来源于stack exchange，提问作者M Usama Jamil