gulpbowerjhipstermain-bower-files

How are the bower dependencies in jHipster organized?


I want to integrate highstock (highstock.js in highcharts) into my jHipster project. Hence I added the following to my bower.json:

"dependencies": {
  "highcharts" : "4.2.6",
  "highcharts-ng": "0.0.12"
},
"overrides": {
  "highcharts-ng": {
    "dependencies": {
        "angular": "1.5.8",
        "highcharts": "4.2.6"
    }
  }
}

When I build my project with this configuration gulp imports the javascript dependencies in index.html file like this:

<script src="bower_components/highcharts/highcharts.js"></script>
<script src="bower_components/highcharts/highcharts-more.js"></script>
<script src="bower_components/highcharts/modules/exporting.js"></script>
<script src="bower_components/highcharts-ng/dist/highcharts-ng.js"></script>

But what I actualy need is only highstock.js: Highcharts project overview

How can I control, what gets imported here?


Solution

  • The solution lies in the used gulp plugin "main-bower-files" which is used by jHipster and documented here.

    The gulp build script decides based on the highcharts/bower.json file what it imports. In the case of highcharts the following is specified:

    {
      "name": "highcharts",
      "version": "v4.2.6",
      "main": [
        "highcharts.js",
        "highcharts-more.js",
        "modules/exporting.js"
      ]
    }
    

    If you want to overriede this you can do so in your project bower.json in the "overrieds" section and specify which javascript it should import:

    "dependencies": {
      "highcharts" : "4.2.6",
      "highcharts-ng": "0.0.12"
    },
    "overrides": {
      "highcharts": {
        "main": "highstock.js"
      },
      "highcharts-ng": {
        "dependencies": {
          "angular": "1.5.8",
          "highcharts": "4.2.6"
        }
      }
    }