Backbone Install Managed by JSPM

[cjkoski]

Hi,

I am trying to install very specific versions of backbone (1.2.1), jquery (2.0.3) and lodash (3.10.1) according to instructions provided by JointJS project: http://www.jointjs.com/download

I got the project working but I am still trying to setup so that JSPM manages the backbone install. I think it has to do with problem shimming the project correctly.

I installed from github: jspm install jquery2-0-3=github:components/jquery@2.0.3 jspm install lodash3-10-1=github:lodash/lodash@3.10.1 jspm install backbone1-2-1=github:jashkenas/backbone@1.2.1

---

In app/jointjs.js file:

import _ from 'lodash3-10-1';

import $ from 'jquery2-0-3';

But In my html file I have to import backbone with jQuery:

System.import('app/jointjs').then(function() { $.getScript('jspm_packages/github/jashkenas/backbone@1.2.1/backbone-min.js', function() {

                ///  Import more jointJS files

});

});

---

This works fine, but I want to get JSPM to manage backbone for bundling etc and so I can import in jointjs file with jquery and lodash:

import _ from 'lodash3-10-1'; import $ from 'jquery2-0-3'; import 'backbone1-2-1';

When I do this I get 404s trying to load underscore.js and jquery.js. If I install newest versions of jquery and underscore backbone will load and application will work using import, but I want to force it to use the specific versions.

I tried an install with shim override -o but doesn't seem to have an effect.

jspm install backbone1-2-1=github:jashkenas/backbone@1.2.1 -o "{ main: 'backbone1-2-1', shim: { 'backbone1-2-1': ['jquery2-0-3', 'lodash3-10-1'] } }

package.json has this:

"overrides": { "github:jashkenas/backbone@1.2.1": { "main": "backbone1-2-1", "shim": { "backbone1-2-1": [ "jquery2-0-3", "lodash3-10-1" ] } } }

---

Any help appreciated. Wondering why using $.getScript works fine, but trying to import and I can't get dependencies correct.

Am I on the correct path with the shim attempt?

Cheers thanks any help.

[guybedford]

Try the following override instead -

jspm install backbone1-2-1=github:jashkenas/backbone@1.2.1 -o "{ main: 'backbone', shim: { 'backbone': ['jquery2-0-3', 'lodash3-10-1'] } }

The main must match up with the exact file name in the repo.

[cjkoski]

Hi Guy.

Thanks, this worked.

I think almost got another shim technique working recently by setting this in config.js:

meta: { 'jspm_packages/github/jashkenas/backbone@1.2.1.js': { deps: ['shim/jointjs'], format: 'AMD' } },

With shim/jointjs.js containing:

import _ from 'lodash3-10-1'; import $ from 'jquery2-0-3';

I was able to verify with console log the shim was getting invoked, but I kept getting an error message saying that: "Cannot set property '$' of undefined" when I would import Backbone.

Can you shed light on why this shim technique did not work but using the override with a main did work?

Cheers Sir! Thanks, good stuff :)

[guybedford]

@cjkoski you'd need to do the meta on the file jspm_packages/github/jashkenas/backbone@1.2.1/backbone.js, as the file specified there is just a main entry point pointer module in jspm 0.16.