76

How would I go about installing 2 versions of jQuery using bower? I want to have v2.0 as well as 1.9.1 for browser support fallback

The issue I'm having is that if you run bower install jquery#1.9.1 jquery#2.0.0 the first version gets overwritten by the second because they are the same component

Paolo
  • 20,112
  • 21
  • 72
  • 113
Adam Coulombe
  • 1,505
  • 1
  • 11
  • 11

4 Answers4

158

According to the bower docs

Bower offers several ways to install packages:

# Using the dependencies listed in the current directory's bower.json
bower install
# Using a local or remote package
bower install <package>
# Using a specific version of a package
bower install <package>#<version>
# Using a different name and a specific version of a package
bower install <name>=<package>#<version>

You can install two different versions of jQuery like so:

bower install jquery-legacy=jquery#1.10 jquery-modern=jquery#2

Or, if you prefer to set that up in a bower.json

"dependencies": {
    "jquery-legacy": "jquery#1.10",
    "jquery-modern": "jquery#2"
}
buzzedword
  • 3,108
  • 3
  • 21
  • 26
  • thanks! good to know, is that a newly added feature? I dont think this was a possibility when I was originally seeking an answer – Adam Coulombe Aug 29 '13 at 13:32
  • @AdamCoulombe looks like this was added as of v1.0.0. It's been stable for a relatively long period of time (software wise) but wasn't in any pre-release of bower. – buzzedword Aug 29 '13 at 14:09
  • This should be the chosen answer – gotofritz Feb 10 '15 at 23:29
  • Definitely this should be the answer – kaosmos May 30 '16 at 15:09
  • This really helps. Follow up question: how do you specify which jQuery version needs to be used on another library? I have an open question [here](http://stackoverflow.com/questions/38006850/how-to-customize-javascript-libraries-and-still-use-bower). – JohnnyQ Jun 24 '16 at 12:28
67

In the dependencies part of your bower.json you can have something like this:

"dependencies": {
    "jquery": "2.0.0",
    "jquery-1.9.1": "http://code.jquery.com/jquery-1.9.1.js"
}

One shouldn't normally have to do this, but sometimes you have to maintain / migrate an existing website that (for whatever reason) uses different versions of jquery in different pages!

Andreas Andreou
  • 1,332
  • 10
  • 10
  • 8
    what about: `"jquery-1.9.1": "jquery#1.9.1"` – Mike Causer Jan 13 '15 at 02:03
  • 1
    "dependencies": { "jquery": "2.0.0", "jquery-1.9.1": "http://code.jquery.com/jquery-1.9.1.js" } ---------- This answer is working fine.But when I minify and uglify the code only one version is available and so the code which use other version is getting broken.Is there any solution for this? – Akhil Xavier Sep 01 '15 at 09:53
12

From the command line, if you just want the latest 1.x and 2.x versions, you can loosen the constraints in the answer above.

So:

bower install jquery-legacy=jquery#1.10 jquery-modern=jquery#2

would become:

bower install jquery-legacy=jquery#^1 jquery-modern=jquery

Community
  • 1
  • 1
Sean DeNigris
  • 6,306
  • 1
  • 31
  • 37
  • 4
    As the PHP/Packagist community is now learning, `bower install jquery-legacy=jquery#^1 jquery-modern=jquery` -- while looser-- still doesn't place an upper bound on the "modern" version. A better loose constraint would be: `bower install jquery-legacy=jquery#^1 jquery-modern=jquery#^2`, since it keeps the modern with an upper bound to prevent major breaking changes. By the time 2.x isn't "modern" anymore, i'd assume you would change the package name anyway. – buzzedword Feb 11 '15 at 15:58
0

bower.json:

This is how i did it...

"dependencies": {
    ...
    "jquery": "2.0.0",
    "jquery-old": "1.9.1"
    ...
}

Second version, can be any version, old or new. You just have to add a different key. Like jquery-old

Install

bower install --save jquery-old

Use

Now you can use either one of the jquery version:

<script type="text/javascript" src="path/to/bower/directory/jquery/dist/jquery.min.js"></script>

<script type="text/javascript" src="path/to/bower/directory/jquery-old/dist/jquery.min.js"></script>

Bonus

"dependencies": {
    ...
    "jquery": "2.0.0",
    "jquery-old": "1.9.1"
    "jquery-latest": "^3.3.1"
    ...
}

pegasuspect
  • 991
  • 4
  • 15