【问题标题】：How to set a bower package dependencies?如何设置 Bower 包依赖项？
【发布时间】：2016-03-19 07:03:28
【问题描述】：

我正在创建一个名为 X 的 bower 包，它依赖于 angular-local-storage。我将angular-local-storage 保存在我的bower.json 中。

我的模块声明为： angular.module('X', ['LocalStorageModule']);

服务为：

angular
  .module('X')
  .service('XService', XService);

function XService($resource, $q, $window, LocalStorageService) {...}

当我在另一个项目中使用 bower 安装包 X 时，找不到 LocalStorageModule。

如何管理这些依赖关系？

编辑：错误是：

Unknown provider: LocalStorageServiceProvider <- LocalStorageService <- XService

【问题讨论】：

标签： angularjs package bower

【解决方案1】：

将“LocalStorageModule”添加到主模块的依赖项列表中。
在包含 Angular 本身之后，从 index.html 的 dist 目录中包含 angular-local-storage.js（或 angular-local-storage.min.js）。

我建议你这样布局你的工厂或服务：

.service('ServiceName', ['$log','OtherService', function($log, OtherService){
   var serviceInstance = {};
   //stuff
   return serviceInstance;
}]);

这比你绝对需要的样板要多，但它是缩小安全的，并保持你的命名空间干净。

【讨论】：

LocalStorageModule 在主列表中，当我将指令添加到视图时仍然出现错误。（该库也包含在 index.html 中）我只是注意到指令包含 index.html 所以角度是依赖项设置了两次：WARNING: Tried to load angular more than once.
当您安装此模块时，bower 是否要求您更新一些依赖项！（坚持）？给我看 bower.json 和 index.html

【解决方案2】：

要构建 bower 包，您需要确保遵循以下步骤：

凉亭包：X

使用以下（最小）配置准备一个 bower.json：

{
  "name": "your-package-x",
  "version": "1.0.0",
  "main": "dist/your-package-x.min.js",
  "dependencies": {
    "angular": "1.5.0",
    "angular-local-storage": "2.0.7"
    ...
  }
}

将所有包的文件构建到 dist/your-package-x.min.js（使用您最喜欢的构建工具）
如果包有 HTML 模板，您应该构建一个 templateCache 文件并将其附加到构建的文件中（使用您的构建工具）：

一个。以 grunt 为例：https://www.npmjs.com/package/grunt-angular-templates

b.以 gulp 为例：https://www.npmjs.com/package/gulp-angular-templatecache
发布到凉亭

外部项目

将 your-package-x 依赖项添加到您的 bower.json：

{
  "name": "main-project",
  "version": "1.0.0",
  "dependencies": {
    "your-package-x": "path to repo or version"
    ...
  }
}

安装 Bower 部门

注入 package-x 及其依赖项：

<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="bower_components/dist/your-package-x/dist/your-package-x.min.js"></script>

==> 或使用构建工具为您完成（寻找 wiredep）

我希望这个快速指南会有所帮助。

【讨论】：