从Bower迁移到Yarn后无法使用electron-builder构建

我之前也碰到过类似的Bower转Yarn迁移坑，结合你给出的错误信息来看，核心问题是electron-builder的依赖分析逻辑没识别到你从Bower迁过来的包——虽然开发环境下Node/Yarn能正常找到这些包让应用启动，但构建打包时，electron-builder默认的依赖扫描没把它们纳入打包范围。

下面是一步步的解决思路：

1. 先确认迁移后的依赖配置是否正确 #

• 打开你的package.json，检查angular、popper.js这些原Bower依赖是不是在dependencies字段里，而不是devDependencies（electron-builder默认不会打包devDependencies里的包）。
• 如果bower-away迁移时自动把它们放到了devDependencies，手动移到dependencies，然后重新执行：

  yarn install
  

2. 强制electron-builder包含目标依赖包 #

electron-builder默认会根据package.json的dependencies自动分析打包内容，但对于原Bower包（尤其是带@bower_components前缀的特殊包），可能需要明确指定要包含的文件。

在你的package.json或者electron-builder.yml里添加打包配置：

"build": {
  "files": [
    "**/*",
    "node_modules/angular/**/*",
    "node_modules/angular-animate/**/*",
    "node_modules/angular-aria/**/*",
    "node_modules/angular-messages/**/*",
    "node_modules/@bower_components/angular-translate/**/*",
    "node_modules/popper.js/**/*"
  ]
}

这样能强制electron-builder把这些依赖的所有文件都打包进去。

3. 处理@bower_components命名空间的特殊依赖 #

@bower_components/angular-translate这种带命名空间的包，可能存在模块解析路径问题，你可以二选一：

• 直接替换成普通npm包：执行yarn add angular-translate，把package.json里的@bower_components/angular-translate替换成标准的angular-translate；
• 或者给模块解析加别名（如果用webpack的话，在webpack.config.js里配置）：

  resolve: {
    alias: {
      '@bower_components/angular-translate': path.resolve(__dirname, 'node_modules/@bower_components/angular-translate')
    }
  }
  

4. 清理缓存后重新构建 #

最后清理旧缓存和依赖，从头来一遍：

rm -rf node_modules dist
yarn install
yarn run build

这样应该就能解决electron-builder找不到迁移后依赖的问题了。

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