Yeoman with Bootstrap: How to choose jQuery version?

Question

I built a custom Yeoman generator that loads, among others, Bootstrap 3.

bower.json-Template:

{
  "name": "<%= _.slugify(appname) %>",
  "version": "0.0.0",
  "dependencies": {<% if (includeBootstrap) { %>
    "bootstrap": "~3.0.3",
    "respond": "~1.4.2",
    <% } %>
    <% if (includeD3) { %>
    "d3": "~3.4.4",
    "colorbrewer": "~1.0.0",
    <% } %>
    "modernizr": "~2.6.2"
  }
}

As you might know, Bootstrap 3 includes jQuery as dependency, here's the bower.json of Bootstrap:

{
  "name": "bootstrap",
  "version": "3.0.3",
  "main": [
    "./dist/js/bootstrap.js", 
    "./dist/css/bootstrap.css", 
    "./dist/fonts/glyphicons-halflings-regular.eot",
    "./dist/fonts/glyphicons-halflings-regular.svg",
    "./dist/fonts/glyphicons-halflings-regular.ttf",
    "./dist/fonts/glyphicons-halflings-regular.woff"
  ],
  "ignore": [
    "**/.*",
    "_*",
    "docs-assets",
    "examples",
    "/fonts",
    "js/tests",
    "CNAME",
    "CONTRIBUTING.md",
    "Gruntfile.js",
    "browserstack.json",
    "composer.json",
    "package.json",
    "*.html"
  ],
  "dependencies": {
    "jquery": ">=1.9.0"
  }
}

As a result of this, the generated yeoman app contains a folder bower_components/jquery, with the newest jQuery version (2.1.0 or something) - which, unfortunately, does not support IE8.

I, unfortunately, need IE8 support.

Now, how do I tell my app that it should load a Bootstrap that includes a bower.json which has ~1.9.0 instead of >=1.9.0?

Second question: Why is jQuery installed on the same hierarchy level as Bootstrap, i.e., in bower_components/jquery/, and not in bower_components/bootstrap/bower_components/jquery or something, as it is a sole dependency of Bootstrap and not specified as such in my yeoman bower.json template?! That's something I find very confusing.

Answer 1

@puredevotion's comment is correct. What I did to resolve this: I explicitly added jQuery in my bower.json. Bootstrap recognizes this and does not load jQuery itself.

Here is my updated bower.json:

{
  "name": "<%= _.slugify(appname) %>",
  "version": "0.0.0",
  "dependencies": {<% if (includeBootstrap) { %>
    "bootstrap": "~3.0.3",
    "respond": "~1.4.2",
    <% } %>
    <% if (includeD3) { %>
    "d3": "~3.4.4",
    "colorbrewer": "~1.0.0",
    <% } %>
    "modernizr": "~2.6.2",
    "jquery": "~1.9.0"
  }
}

I still don't know the answer to my second question though.

Answer 2

You need css3-mediaqueries-js take a look at this for how to use it in your situation.