variable systemjs d'un autre fichier

Question

J'ai deux fichiers javascript dans mon projet. Un (index.js) déclare l'objet Material et l'autre (nav.js) ajoute une méthode à Material. J'utilise SystemJS pour importer les deux dans ma page HTML.

Lorsque la page se charge, j'obtiens une erreur du second fichier indiquant que Material est indéfini.

Si je suis le chargement du premier fichier avant la seconde comme si:

<script src="./jspm_packages/system.js"></script> 
<script src="./config.js"></script> 
<script> 
    System.import("./scripts/index.js"); 
    System.import("./scripts/nav.js"); 
</script> 

ne doit pas l'objet matériel déjà défini?

---

Voici mes deux fichiers:

index.js:

var $ = require('jquery'); 

// Define Material 
var Material = { 
    components: {}, 
    reload: function() { 
    console.log('reloading...'); 
    }, 
    dev: true 
}; 

et nav.js:

var $ = require('jquery'); 

Material.initHeader = function() { 
    console.log('initializing header...'); 
}; 

Voici l'erreur que je reçois

Uncaught ReferenceError: Material is not defined at nav.js:3

De l'aide?

Answer 1

Les modules sont autonomes. Ils ne modifient pas l'espace de noms global lorsqu'ils sont chargés. Si vous voulez des choses d'un autre module, vous devez l'importer:

var $ = require('jquery'); 
var ix = require('./index.js'); 

ix.Material.initHeader = function() { 
    console.log('initializing header...'); 
};