How do I include the separate codemirror mode files using bower?

Question

I'm building an angular fullstack application using Yeoman Angular Fullstack, which includes bower.

In that application, I'm using a component called Codemirror, which has its own bower package called codemirror, and another bower package called angular-ui-codemirror.

Inside of the regular codemirror bower package, there are additional mode files in a directory called mode, and in a normal non-bower managed application, I'd simply just add the necessary script tags to my index.html, but here, i want to do it the correct way using bower, if possible.

How should I include that separate sub-file for the codemirror mode using bower?

Preview Preview · Accepted Answer · 2014-10-26T19:34:09

Since angular-fullstack uses wiredep to inject your bower dependencies, you could overrides the main property of the codemirror bower package to include the additional files you want from its mode directory.

To do so, you have two options:

Override in your Gruntfile
Override directly in your bower.json

I'll recommend you the second solution, because at a single look of your manifest file you can see what files will be included, it's more verbose and comprehensible.

Here is an example with the a bower.json and including the extra asterisk.js file, but it's almost the same using the Gruntfile option.

{
  "name": "testingPurposes",
  "dependencies": {
    "codemirror": "~4.7.0"
  },
  "overrides": {
    "codemirror": {
      "main": ["lib/codemirror.js", "lib/codemirror.css", "mode/asterisk/asterisk.js"]
    }
  }
}

Then when running a task that use the wiredep one, like grunt serve, you will see the additional file included in your index.html.

How do I include the separate codemirror mode files using bower?

1 Answers