使用wiredep在Angular应用程序中添加bower包

Use wiredep to add bower packages in Angular app

本文关键字：添加 bower 应用程序 wiredep Angular 使用      更新时间：2024-01-26

我对angular js&吞咽我目前也在尝试移动应用程序的离子框架。我开始使用ionic标签模板，我使用bower作为js库。我在我的bower.json文件中添加了一些bower包，并希望使用wiredep将这些文件注入到我的index.html中。

摘录自index.html

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<!-- bower:js -->
<script src="lib/angular/angular.js"></script>
<script src="lib/ng-azure-mobile-service/ng-azure-mobile-service.min.js"></script>
<script src="lib/ng-azure-mobile-service/MobileServices.Web-1.2.5.js"></script>
<!-- endbower -->

你可以看到，我的bower:js部分只包含我的bowler包中的三个文件，而不是来自ionic。在理想的情况下，我必须能够删除前3行，并在wiredep上为我添加它们进行防御。

bower.json

{
  "name": "oz-beauty",
  "private": "true",
  "devDependencies": {
    "ionic": "driftyco/ionic-bower#1.0.0-beta.14"
  },
  "dependencies": {
    "ng-azure-mobile-service": "~1.3.5"
  },
  "overrides": {
    "ionic": {
      "main": ["lib/ionic/js/ionic.bundle.js"]
    }
  }
}

如果我遗漏了什么，请告诉我。

如果使用gull，则可以使用wiredep插件的devDependencies标志。

gulp.task('bower', function () {
   gulp.src('./app/index.html')
     .pipe(wiredep({
        devDependencies: true
      }))
     .pipe(gulp.dest('./dest'));
});
相关文章：