Load sigmajs through requirejs

Question

I am trying the RequireJS AMD,

And would like to load - among others (jquery, bootstrap, d3, moment...) - the graph library sigmajs, But when I load it in a module, It is undefined... However it exists in the window object...

Is it a bad practice to require it in a module ? Should it require it in the global requirejs bootstrapping and use it from the window ?

Here is my application bootstrapping :

// My application root folder
index.html
build.js
assets/
    package.json
    bower.json
    gulpfile.js
    js/
        app.js
        modules/
            graph.js
        vendor/
            require-2.1.14.js
            jquery-2.1.1.min.js
            underscore-1.6.0.min.js
            d3-3.4.11.min.js
            moment-2.7.0.min.js
            sigma-1.0.2.min.js
            my-own-npm-module-1.0.0.min.js
    css/

My app.js file : requirejs bootstrapping, seems to work well

// /assets/js/app.js
requirejs.config({
    baseUrl: 'assets/js/vendor',
    paths: {
        'jquery': 'jquery-2.1.1.min',
        'bootstrap': 'bootstrap-3.2.0.min',
        'moment': 'moment-2.7.0.min',
        '_': 'underscore-1.6.0.min',
        'd3': 'd3-3.4.11.min',
        'sigma': 'sigma-1.0.2.min',
        'my-own-npm-module': 'my-own-npm-module-1.0.0.min',
        'app': '../modules'
    },
    shim: {
        'bootstrap': {
            deps: ['jquery'],
            exports: '$'
        }
    }
});

// App loading
requirejs([
    'jquery',
    'bootstrap',
    'app/graph'
], function ($, bootstrap, graph) {
    graph.initialize();
});

My graph.js file, requiring the unfortunately undefined sigmaJs

define(['sigma', 'd3', 'my-own-npm-module'], function (sigma, d3, MyOwnModule) {
    var initialize,
        graph;

    initialize = function () {
        console.log('init', d3, sigma, sigma === window.sigma, MyOwnModule);
        // Here, d3 is well loaded and even MyOwnModule.
        // But unfortunately, sigma is undefined even if window.sigma is loaded
        // And of course, sigma === window.sigma returns false.
        graph = new sigma('graph-container');
    }

    return {
        'initialize': initialize
    }
});

Flo Schild · Accepted Answer · 2015-01-05T08:40:36.327

This seems to be a current small problem with SigmaJS ; It is however possible with the nodeJs version of sigmaJs :

npm install sigma

The working script file will then be located in :

node_modules/sigma/build/sigma.require.js

However this require call of sigma.js only loads sigma in the window object ; To prevent this export, the cleanest way would be to use the "shim" option of requirejs :

requirejs.config({
    baseUrl: 'assets/js/vendor',
    paths: {
        'sigma': 'sigma-1.0.3.require'
    },
    shim: {
        'sigma': {
            exports: 'sigma'
        }
    }
});

Load sigmajs through requirejs

1 Answers1