JSPM Builder: How to depend on other module?

Question

I have the following config for my JSPM Build using a TypeScript compiler:

var Builder = require('jspm').Builder;

var builder = new Builder('.');
    builder.reset();

builder.loadConfig('./jspm.conf.js')
    .then(function() {

        builder.config({
            defaultJSExtensions: false,
            transpiler: "typescript",
            typescriptOptions: {
                "module": "system",
                "experimentalDecorators": true,
                "resolveAmbientRefs": true
            },
            packages: {
                "source": {
                    "main": "app/index",
                    "defaultExtension": "ts",
                    "meta": {
                        "*.ts": {
                            "loader": "ts"
                        },
                        "*.css": {
                            "loader": "css"
                        }
                    }
                }
            },
            packageConfigPaths: [
                "npm:@*/*.json",
                "npm:*.json",
                "github:*/*.json"
            ],
            meta: {
                "three": {
                    "format": "global",
                    "exports": "THREE"
                },
                "three-firstpersoncontrols": {
                    "deps": "three"
                }
            },
            map: {
                "three": "github:mrdoob/three.js@r79/build/three.js",
                "three-firstpersoncontrols": "github:mrdoob/three.js@r79/examples/js/controls/FirstPersonControls.js"
            }
        });

        var promises = new Array();

        promises.push(builder.buildStatic('source', './build/js/app.min.js', {
            sourceMaps: false,
            minify: true,
            mangle: false
        }));

        return Promise.all(promises);
    })
    .then(function() {
        cb();
    })
    .catch(function(err) {
        console.log('Build Failed. Error Message: ', err);
    });

I am trying to use the THREE.js library along with seperate files containing functionality for e.g. FirstPersonControls. Paths are defined in the map section and these all work just fine.

After bundling, I get the message that THREE.FirstPersonControls is not a contructor. My guess so far is that the seperate module three-firstpersoncontrols does not depend on the global THREE variable, making it impossible to call the constructor THREE.FirstPersonControls.

So my question becomes:

How do I let these seperate modules depend on my global THREE module in the build?

Answer 1

After a while I found out the problem was with this part:

typescriptOptions: {
    "module": "system", // <-- THIS LINE
    "experimentalDecorators": true,
    "resolveAmbientRefs": true
}

I had to change my module format from system to amd to work, so now the config has become:

typescriptOptions: {
    "module": "amd",
    "experimentalDecorators": true,
    "resolveAmbientRefs": true
}

Hopefully anyone else with this problem can use this answer.