Grunt wiredep but choosing a different main file to import into index

Question

I have installed highcharts through bower and I have the job wiredep running in grunt when I build. Highchart's bower.json file looks like this:

{
  "name": "highcharts",
  "version": "v5.0.7",
  "main": "highcharts.js"
}

So what happens is I get this in my index file:

<script src="bower_components/highcharts/highcharts.js"></script>

but what I am after is highstock.js which is a part of the already installed highcharts library, however I can't add that in manually and keep running the wiredep because it will get replaced, and I also don't want to add it in outside of the <!-- bower:js -->...<!-- endbower --> as that'll define highcharts twice.

Is there a way I can do that properly?

Answer 1

The way to do that is to override the highcharts library in bower.json like so:

"dependencies": {
    "highcharts": "^5.0.7",
    "highcharts-custom-events": "^2.0.9"
  },
  "overrides": {
    "highcharts": {
      "main": "highstock.js"
    }
  }

That way I'm overriding the particular library and defining the main js. If you wanted multiple files you can define an array: ["dist/package-without-main.css", "dist/package-without-main.js"]

Check bower-overrides for more details: https://github.com/taptapship/wiredep#bower-overrides